/* Minerál Center — felület.
   Cél: Firefox, Windows, 1366×768, 125% nagyítás (≈1093×614 CSS pixel).
   Ezen a méreten semmi nem csúszhat egymásra, és nem kell vízszintesen görgetni.
   A színek CSS-változók, egy hangsúlyszínnel (a logó kékje). */

:root {
  --tinta: #1d2733;
  --halvany: #5b6773;
  --vonal: #d6dce2;
  --vonal-halvany: #e8edf1;
  --hatter: #f2f6fb;
  --lap: #ffffff;
  --kek: #1668c9;
  --kek-sotet: #0f4f9c;
  --kek-halvany: #eaf2fd;
  --sor-kiemel: #dbe9fb;          /* amelyik soron épp dolgozunk */
  --fejlec: #e3edfb;              /* táblázatok fejlécsora */
  --sarga: #fff4cc;
  --sarga-vonal: #e8d48a;
  --piros: #b3261e;
  --piros-halvany: #fbeceb;
  --zold: #1e8b4d;
  --narancs: #c9710f;
  --lila: #6b3fb5;
  --zold-halvany: #e7f4ec;
  --sugar: 6px;
  --sugar-nagy: 10px;
  --arnyek-1: 0 1px 2px rgba(29, 39, 51, .05), 0 0 0 1px rgba(29, 39, 51, .035);
  --arnyek-2: 0 6px 18px rgba(29, 39, 51, .08), 0 1px 3px rgba(29, 39, 51, .05);
  --menu-szeles: 188px;
  --oldalsav-szeles: 232px;
}

* { box-sizing: border-box; }
/* A hidden attribútum mindig rejtsen — a saját display: flex/grid szabályok (belépő, app) különben felülírnák,
   és a belépő kártya a bejelentkezés után is a képernyőn maradna. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--hatter);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 10px; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
/* szakaszcím a dobozokban: kis, ritkított felirat — a tartalom a hangsúlyos, nem a cím */
h3 { font-size: 12px; color: var(--halvany); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
h4 { font-size: 14px; margin-top: 16px; }
p { margin: 0 0 10px; }
a { color: var(--kek); }
code { background: var(--vonal-halvany); padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.halvany { color: var(--halvany); }
.jo-szoveg { color: var(--zold); }
.baj-szoveg { color: var(--piros); }
.rendben { color: var(--zold); font-weight: 600; }

/* ---- gombok: képernyőnként egy kitöltött elsődleges, a többi másodlagos vagy link ---- */
button, input, select, textarea { font: inherit; }
button {
  padding: 7px 14px; min-height: 35px;
  border: 1px solid var(--kek-sotet); border-radius: var(--sugar);
  background: linear-gradient(180deg, #2a7cc1, var(--kek)); color: #fff; cursor: pointer;
  white-space: nowrap; font-weight: 600; font-size: 14.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
@media (hover: hover) { button:hover:not(:disabled) { background: var(--kek-sotet); border-color: var(--kek-sotet); } }
/* másodlagos: csendes, szürke keretes — a képernyőn csak az elsődleges kék */
button.masodlagos { background: var(--lap); color: var(--tinta); border-color: var(--vonal); font-weight: 500; box-shadow: var(--arnyek-1); }
@media (hover: hover) { button.masodlagos:hover:not(:disabled) { background: var(--hatter); border-color: #c3ccd5; color: var(--tinta); } }
button.veszelyes { background: var(--piros); border-color: var(--piros); }
@media (hover: hover) { button.veszelyes:hover:not(:disabled) { background: #8d1d17; border-color: #8d1d17; } }
button.link {
  background: none; border: none; color: var(--kek); padding: 0 2px;
  min-height: 0; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; font-weight: 500; font-size: inherit; box-shadow: none;
}
@media (hover: hover) { button.link:hover:not(:disabled) { background: none; color: var(--kek-sotet); } }
button.link.veszelyes-link { color: var(--piros); }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  padding: 7px 10px; min-height: 36px; border: 1px solid var(--vonal); border-radius: var(--sugar);
  background: #fff; width: 100%; color: var(--tinta); box-shadow: inset 0 1px 2px rgba(29, 39, 51, .04);
}
input[type=number] { font-variant-numeric: tabular-nums; }
@media (hover: hover) { input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #bfc8d1; } }
input[type="checkbox"] { width: auto; }
input[type="date"] { width: auto; min-width: 140px; }
textarea { resize: vertical; }
label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--halvany); line-height: 1.3; }
label input, label select, label textarea { margin-top: 6px; font-size: 15px; }
label small { display: block; margin-top: 4px; }
label.pipa { display: flex; align-items: center; gap: 8px; color: var(--tinta); font-size: 15px; margin: 10px 0; }
label.pipa input { margin: 0; }
label.vonalban { display: flex; align-items: center; gap: 6px; margin: 0; }
label.vonalban select { margin: 0; width: auto; }
small { font-size: 12.5px; }
:focus-visible { outline: 3px solid #9cc3e8; outline-offset: 1px; }
::placeholder { color: #9aa4ae; }

/* ---- alaprács ---- */
#app { display: grid; grid-template-columns: var(--menu-szeles) minmax(0, 1fr) var(--oldalsav-szeles); min-height: 100vh; }
#menu {
  background: linear-gradient(180deg, #e9f1fd 0, #f5f9fe 220px, var(--lap) 480px);
  border-right: 1px solid var(--vonal);
  padding: 14px 10px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
#menu .cegnev {
  font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; white-space: nowrap;
  margin: -14px -10px 12px; padding: 16px 14px; color: #fff;
  background: linear-gradient(135deg, #2f8ae0, var(--kek-sotet));
}
#menu .cegnev .marka-jel { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.marka-jel {
  display: inline-block; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(145deg, #4aa3f0, var(--kek-sotet)); position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 3px 8px rgba(22, 104, 201, .22);
}
.marka-jel::after {
  content: ''; position: absolute; left: 9px; top: 6px; width: 8px; height: 11px;
  background: rgba(255, 255, 255, .92); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(45deg) scale(.85); border-top-left-radius: 0;
}
#menu a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; color: var(--tinta); text-decoration: none;
  border-radius: var(--sugar); font-size: 14px;
}
#menu a svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--halvany); }
@media (hover: hover) { #menu a:hover { background: var(--hatter); } }
#menu a.aktiv { background: var(--kek); color: #fff; font-weight: 600; }
#menu a.aktiv svg { color: #fff; }
/* a csúszó jelző alatt is fehér marad a szöveg */
#menu a.keszuloben { color: var(--halvany); }
#menu a.keszuloben::after { content: " · készül"; font-size: 11.5px; }
#menu .menu-alja { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--vonal-halvany); }
#menu .belepett { margin-bottom: 8px; line-height: 1.3; }
#menu .belepett b { display: block; font-size: 14px; }
#menu .belepett small { color: var(--halvany); }
#menu .menu-alja button { width: 100%; }
.elo-jelzo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vonal); margin-right: 5px; vertical-align: middle; }
.elo-jelzo.jo { background: var(--zold); }
.elo-jelzo.baj { background: var(--piros); }

#tartalom { padding: 20px 24px 48px; min-width: 0; }
#oldalsav {
  background: var(--lap); border-left: 1px solid var(--vonal); padding: 16px 14px;
  font-size: 13px; position: sticky; top: 0; height: 100vh; overflow: auto;
}
#oldalsav section { margin-bottom: 22px; }
#oldalsav ul { list-style: none; margin: 0; padding: 0; }
#oldalsav li { padding: 7px 0 7px 12px; border-bottom: 1px solid var(--vonal-halvany); position: relative; line-height: 1.35; }
#oldalsav li::before { content: ''; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--vonal); }
#oldalsav #valtozasok li:first-child::before { background: var(--kek); }
#oldalsav li small { color: var(--halvany); display: block; font-variant-numeric: tabular-nums; }
.ures-kicsi { color: var(--halvany); font-style: italic; }

/* ---- fejsor és eszközsor ---- */
.fejsor { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fejsor h1 { margin: 0; }
.fejsor-gombok { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.eszkozsor { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.eszkozsor .tolto { flex: 1 1 auto; }
.kereso { width: 280px; flex: 0 1 280px; }

.szuro { display: flex; gap: 2px; background: var(--vonal-halvany); border-radius: 8px; padding: 3px; }
.szuro a { padding: 5px 12px; border-radius: 6px; text-decoration: none; color: var(--halvany); font-size: 14px; font-weight: 500; }
@media (hover: hover) { .szuro a:hover { color: var(--tinta); } }
.szuro a.aktiv { background: var(--lap); color: var(--tinta); font-weight: 600; box-shadow: var(--arnyek-1); }
.eszkozsor .gomb-szeru { flex: 0 0 auto; min-height: 35px; padding: 7px 14px; font-weight: 500; }
.fulek { margin-bottom: 16px; }

/* ---- dobozok, csempék ---- */
.doboz { background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar-nagy); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--arnyek-1); }
.doboz > h3 { margin-bottom: 12px; }
.racs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.racs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.cim-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--vonal); }
@media (hover: hover) { .cim-link:hover { color: var(--kek-sotet); border-bottom-color: var(--kek); } }
.csempek { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.csempe {
  flex: 1 1 140px; min-width: 130px;
  background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar-nagy);
  padding: 12px 14px 11px; text-decoration: none; color: var(--tinta); display: block; box-shadow: var(--arnyek-1);
  position: relative; overflow: hidden;
}
@media (hover: hover) { a.csempe:hover { border-color: var(--kek); background: var(--kek-halvany); } }
.csempe b { display: block; font-size: 23px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.csempe span { font-size: 12.5px; color: var(--halvany); display: block; margin-top: 3px; }
.csempe.kiemelt-csempe { border-color: var(--kek); background: var(--kek-halvany); }
.csempe::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.csempe.baj b { color: var(--piros); }
.csempe.baj::before { background: var(--piros); }
.csempe.figyelem::before { background: var(--sarga-vonal); }

/* ---- táblázatok ---- */
.tabla { overflow-x: auto; background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar-nagy); box-shadow: var(--arnyek-1); margin-bottom: 16px; }
.doboz .tabla, dialog .tabla { border: none; border-radius: 0; box-shadow: none; margin-bottom: 0; }
.tabla-magas { max-height: 380px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; background: var(--lap); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vonal-halvany); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
/* A fejlécsor állandó színnel elválik az adatoktól — Árpád kérése, hogy egy pillantásra látszódjon,
   melyik oszlop micsoda. A sor, amin épp dolgozunk, határozott kék kiemelést kap. */
thead th {
  font-weight: 700; color: var(--kek-sotet); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  background: var(--fejlec); border-bottom: 2px solid var(--kek); position: sticky; top: 0;
}
@media (hover: hover) {
  tbody tr:hover td { background: var(--kek-halvany); }
  tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--kek); }
  tbody tr.csoport-fej:hover th, tbody tr.osszesen:hover th { background: var(--kek-halvany); }
}
td.sz, th.sz { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.muvelet, th.muvelet { white-space: nowrap; }
td.muvelet button + button { margin-left: 6px; }
tr.kattinthato { cursor: pointer; }
@media (hover: hover) { tr.kattinthato:hover td { background: var(--sor-kiemel); } }
tr.baj-sor td { background: var(--piros-halvany); }
tr.halvany-sor td { color: var(--halvany); background: #fafbfc; }
tr.osszesen th { border-top: 2px solid var(--kek); background: var(--fejlec); color: var(--kek-sotet); }
.tetel-tabla td, .tetel-tabla th { padding: 4px 8px; }
/* A statisztika tíz oszlopa: sűrűbb szedés, hogy 1366×768-on 125%-kal is elférjen */
table.statisztika { font-size: 13px; }
table.statisztika td, table.statisztika th { padding: 4px 5px; }
table.statisztika td:first-child, table.statisztika th:first-child { padding-left: 8px; }
table.statisztika thead th small { font-weight: 400; color: var(--halvany); }
table.termek-tabla, table.gep-tabla, table.rendeles-tabla { font-size: 14px; }
table.rendeles-tabla td, table.rendeles-tabla th { padding: 7px 8px; }
table.rendeles-tabla .muvelet { text-align: right; }
table.rendeles-tabla .muvelet button.link { margin-left: 6px; }
/* A cím és a tételek hosszú szövege törjön, hogy a művelet-oszlop elférjen */
table.rendeles-tabla { table-layout: fixed; width: 100%; }
table.rendeles-tabla td, table.rendeles-tabla th { overflow-wrap: anywhere; }
table.rendeles-tabla th:nth-child(1) { width: 6%; }
table.rendeles-tabla th:nth-child(2) { width: 19%; }
table.rendeles-tabla th:nth-child(3) { width: 17%; }
table.rendeles-tabla th:nth-child(4) { width: 17%; }
table.rendeles-tabla th:nth-child(5) { width: 11%; }
table.rendeles-tabla th:nth-child(6) { width: 11%; }
table.rendeles-tabla th:nth-child(7) { width: 19%; }
table.rendeles-tabla th, table.rendeles-tabla td:first-child { overflow-wrap: normal; white-space: nowrap; }
table.rendeles-tabla td:first-child { color: var(--halvany); font-variant-numeric: tabular-nums; }
table.rendeles-tabla .muvelet { white-space: normal; }
table.gep-tabla td, table.gep-tabla th { padding: 5px 7px; overflow-wrap: anywhere; }
table.gep-tabla { table-layout: fixed; width: 100%; }
table.gep-tabla th:nth-child(1) { width: 16%; }
table.gep-tabla th:nth-child(2) { width: 12.5%; }
table.gep-tabla th:nth-child(3) { width: 12.5%; }
table.gep-tabla th:nth-child(4) { width: 13%; }
table.gep-tabla th:nth-child(5) { width: 10.5%; }
table.gep-tabla th:nth-child(6) { width: 10.5%; }
table.gep-tabla th:nth-child(7) { width: 25%; }
table.gep-tabla th { overflow-wrap: normal; }
table.gep-tabla .muvelet { white-space: normal; }
table.gep-tabla .muvelet { text-align: right; }
table.gep-tabla .muvelet button.link { margin-left: 8px; }
table.gep-tabla .muvelet { line-height: 1.4; }
table.termek-tabla td, table.termek-tabla th { padding: 5px 7px; }
table.termek-tabla thead th small { font-weight: 400; color: var(--halvany); }
.tetel-tabla input[type=number] { width: 90px; }
.sorszam { display: inline-block; background: var(--vonal-halvany); border-radius: 4px; padding: 0 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--halvany); }
.nyilak { display: inline-flex; flex-direction: column; line-height: 1; margin-left: 4px; }
.nyilak button { font-size: 10px; text-decoration: none; }
dl.adatok { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
dl.adatok dt { color: var(--halvany); font-size: 13px; }
dl.adatok dd { margin: 0; }
.telephely { padding: 7px 0; border-bottom: 1px solid var(--vonal-halvany); }
.telephely:last-of-type { border-bottom: none; }
.lista-egyszeru { list-style: none; margin: 0; padding: 0; }
.lista-egyszeru li { padding: 4px 0; border-bottom: 1px solid var(--vonal-halvany); }
table.beallitasok td.b-kulcs, td.b-kulcs { width: 28%; }
table.lekepezes td { width: 50%; }
.kotelezo { color: var(--piros); font-size: 11.5px; }

/* korosítás-sávok */
table.korositas { margin-bottom: 12px; max-width: 620px; }
table.korositas td { border-bottom: none; padding: 3px 9px; }
.savoszlop { width: 40%; }
.sav { display: block; height: 11px; border-radius: 2px; min-width: 2px; }
.sav.jo { background: var(--zold); }
.sav.baj { background: var(--piros); }

/* ---- címkék, jelzések ---- */
.cimke { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.35; background: var(--vonal-halvany); color: var(--halvany); white-space: nowrap; vertical-align: middle; }
.cimke:empty { display: none; }
.cimke.figyelem, .cimke.tervezet { background: var(--sarga); }
.cimke.jo, .cimke.kiszallitva, .cimke.fizetve, .cimke.elfogadva { background: var(--zold-halvany); color: var(--zold); }
.cimke.baj, .cimke.sztornozva, .cimke.elutasitva, .cimke.lejart, .cimke.gep-szervizben { background: var(--piros-halvany); color: var(--piros); }
.cimke.listan, .cimke.kikuldve, .cimke.gep-kihelyezve { background: #e3ecf5; color: var(--kek-sotet); }
.hiba { color: var(--piros); }
.info { color: var(--halvany); font-size: 13.5px; }
.figyelmeztetes { background: var(--sarga); border: 1px solid var(--sarga-vonal); padding: 9px 12px 9px 14px; border-radius: var(--sugar); margin-bottom: 10px; border-left-width: 4px; }
.ures { color: var(--halvany); padding: 28px 22px; text-align: center; }
.keszuloben-lap { padding: 60px 24px; text-align: center; color: var(--halvany); }
.keszuloben-lap h1 { color: var(--tinta); }
.partner-info { font-size: 13px; color: var(--halvany); background: var(--hatter); border-radius: var(--sugar); padding: 8px 10px; }
.partner-info b { color: var(--tinta); }
.visszatoltott { background: var(--sarga); }
.ft-jelzes { display: block; color: var(--halvany); font-variant-numeric: tabular-nums; margin-top: 2px; }
.terv-hiba td { background: var(--piros-halvany); }
.terv-kihagyas td { color: var(--halvany); }
pre.sema { background: var(--hatter); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 12px; max-height: 420px; overflow: auto; font-size: 12.5px; white-space: pre-wrap; }
iframe.elonezet { width: 100%; height: 64vh; border: 1px solid var(--vonal); border-radius: 6px; background: #fff; display: block; }

/* sofőri megállók */
.megallo { background: var(--lap); border: 1px solid var(--vonal); border-radius: 6px; padding: 11px 14px; margin-bottom: 10px; }
.megallo-fej { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.megallo-fej b { font-size: 16px; }

/* ---- belépés: világos, nyugodt, vízkék ---- */
.belepes {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
  background: linear-gradient(160deg, #f7fafd 0%, #eaf3fa 55%, #e2eef8 100%);
}
.belepes-doboz {
  background: var(--lap); border: 1px solid rgba(22, 104, 201, .12); border-radius: 12px; padding: 34px 36px 26px; width: 380px; max-width: 100%;
  box-shadow: 0 18px 50px rgba(23, 79, 128, .10), 0 2px 6px rgba(23, 79, 128, .05);
}
.belepes-fej { margin-bottom: 22px; }
.belepes-fej h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.belepes-alcim { margin: 2px 0 0; color: var(--halvany); font-size: 14px; }
/* a Minerál Center jele: egy nyugodt kék körlap egy csepp-nyomottal — később a saját SVG kerül ide */
.belepes-jel {
  display: block; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(145deg, #4aa3f0, var(--kek-sotet));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 14px rgba(22, 104, 201, .22);
  position: relative;
}
.belepes-jel::after {
  content: ''; position: absolute; left: 14px; top: 10px; width: 12px; height: 16px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(45deg) scale(.85);
  border-top-left-radius: 0;
}
.belepes-doboz label { font-size: 13px; margin-bottom: 12px; }
.belepes-doboz label input { min-height: 44px; font-size: 15px; }
.belepes-doboz button[type=submit] { width: 100%; margin-top: 8px; min-height: 46px; font-size: 15.5px; font-weight: 600; }
.belepes-doboz button.masodlagos { width: 100%; margin-top: 8px; }
.belepes-labl { margin: 18px 0 0; text-align: center; color: var(--halvany); font-size: 12.5px; }
#kod-urlap input[name=kod] { font-size: 24px; text-align: center; letter-spacing: .4em; min-height: 52px; }
/* háttérformák: víztükör-fények, nagyon lassan úsznak (2–6 px), nem zavarnak, nem kattinthatók */
.belepes-hatter .hullam {
  position: absolute; border-radius: 50%; opacity: .55;
  background: radial-gradient(circle at 40% 40%, rgba(22, 104, 201, .16), rgba(22, 104, 201, 0) 68%);
  animation: hullam-uszik 26s var(--ease-standard) infinite alternate;
}
.belepes-hatter .hullam-1 { width: 620px; height: 620px; right: -160px; top: -220px; }
.belepes-hatter .hullam-2 { width: 480px; height: 480px; left: -180px; bottom: -200px; animation-duration: 32s; animation-delay: -9s; }
.belepes-hatter .hullam-3 { width: 260px; height: 260px; left: 18%; top: 12%; opacity: .35; animation-duration: 22s; animation-delay: -15s; }
@keyframes hullam-uszik { from { transform: translate(0, 0); } to { transform: translate(5px, -4px); } }
@media (max-width: 480px) { .belepes-doboz { padding: 26px 22px 20px; } }

/* ---- üzenetek ---- */
.uzenet {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14.5px;
  max-width: min(640px, 90vw); z-index: 30;
}
.uzenet.hiba { background: var(--piros); }
.halozat {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--piros); color: #fff; padding: 8px 16px; text-align: center;
}
.halozat button { background: #fff; color: var(--piros); border-color: #fff; min-height: 30px; padding: 4px 12px; margin-left: 10px; }

/* ---- párbeszédek ---- */
dialog {
  border: 1px solid var(--vonal); border-radius: 12px; padding: 22px 24px;
  width: min(640px, 94vw); max-height: 88vh; color: var(--tinta);
}
dialog > h2 { font-size: 18px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--vonal-halvany); }
dialog h3 { margin-top: 14px; }
dialog.szeles { width: min(920px, 96vw); }
dialog.megerosites { width: min(460px, 94vw); }
dialog.megerosites p { white-space: pre-line; }
dialog::backdrop { background: rgba(23, 39, 51, .38); backdrop-filter: blur(2px); }
dialog .gombsor { display: flex; justify-content: flex-end; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--vonal-halvany); }
dialog form { max-height: calc(88vh - 110px); overflow: auto; }
dialog .gombsor { position: sticky; bottom: 0; background: var(--lap); }

/* ---- keskenyebb képernyők (a 125%-os nagyítás is ide esik) ---- */
@media (max-width: 1240px) {
  :root { --menu-szeles: 172px; --oldalsav-szeles: 204px; }
  #tartalom { padding: 16px 16px 40px; }
  .kereso { width: 230px; flex: 0 1 230px; }
}
@media (max-width: 980px) {
  #app { grid-template-columns: 150px minmax(0, 1fr); }
  #oldalsav { display: none; }
  .racs2, .racs3 { grid-template-columns: 1fr; }
}

/* ---- nyomtatás: csak a tartalom, menü és gombok nélkül ---- */
@media print {
  body { background: #fff; font-size: 11pt; }
  #menu, #oldalsav, #uzenet, #halozat, .fejsor-gombok, .eszkozsor, .muvelet, button { display: none !important; }
  #app { display: block; }
  #tartalom { padding: 0; }
  .doboz, .csempe { border: 1px solid #999; break-inside: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  thead th { position: static; }
  a { color: #000; text-decoration: none; }
  @page { size: A4; margin: 12mm; }
}

/* ================================================================
   Sofőri felület — telefonra. Nagy gombok, kevés szöveg, egy kéz.
   A `sofor-mod` osztály akkor kerül a body-ra, ha sofőr van belépve.
   ================================================================ */

/* A sofőrnek nincs oldalsáv és menüoszlop: a teljes képernyő a köré */
body.sofor-mod #app { grid-template-columns: 1fr; }
body.sofor-mod #oldalsav { display: none; }
body.sofor-mod #menu {
  position: sticky; top: 0; height: auto; flex-direction: row; align-items: center;
  padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--vonal); z-index: 5;
}
body.sofor-mod #menu .cegnev { padding: 0; font-size: 15px; margin-right: auto; }
body.sofor-mod #menu a { display: none; }
body.sofor-mod #menu .menu-alja { margin: 0; padding: 0; border: none; display: flex; align-items: center; gap: 10px; }
body.sofor-mod #menu .belepett { margin: 0; }
body.sofor-mod #menu .belepett b { font-size: 13px; }
body.sofor-mod #menu .menu-alja button { width: auto; min-height: 32px; padding: 4px 10px; }
body.sofor-mod #tartalom { padding: 12px 12px 40px; }
body.sofor-mod { font-size: 16px; }

.sofor-fej { background: var(--lap); border: 1px solid var(--vonal); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.sofor-fej-sor { display: flex; align-items: center; gap: 10px; }
.sofor-datum { flex: 1 1 auto; text-align: center; line-height: 1.2; }
.sofor-datum b { display: block; font-size: 17px; }
.sofor-datum span { font-size: 13px; color: var(--halvany); }
.sofor-valaszto { margin-top: 8px; }
button.ikon { background: var(--kek-halvany); color: var(--kek); border-color: var(--kek-halvany); min-width: 44px; min-height: 44px; font-size: 16px; }
.sofor-halado { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.halado-sav { flex: 1 1 auto; height: 8px; background: var(--vonal-halvany); border-radius: 4px; overflow: hidden; }
.halado-sav span { display: block; height: 100%; background: var(--zold); }

/* Megálló-kártya: az egész kártya egy nagy gomb */
.megallo-kartya {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--lap); color: var(--tinta); border: 1px solid var(--vonal); border-radius: 8px;
  padding: 12px; margin-bottom: 10px; min-height: 68px;
}
@media (hover: hover) { .megallo-kartya:hover:not(:disabled) { background: var(--kek-halvany); border-color: var(--kek); } }
.megallo-szam {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--kek); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.megallo-fo { flex: 1 1 auto; min-width: 0; display: block; }
.megallo-fo b { display: block; font-size: 16px; }
.megallo-cim, .megallo-tetel { display: block; font-size: 13px; color: var(--halvany); }
.megallo-jobb { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 42%; }
.megallo-jobb .nyil { font-size: 22px; color: var(--halvany); }
/* a kártya mellett a sofőr saját sorrend-gombjai */
.megallo-sor { display: flex; align-items: stretch; gap: 8px; }
.megallo-sor .megallo-kartya { flex: 1 1 auto; }
.megallo-rendez { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.megallo-rendez button { min-width: 46px; flex: 1 1 0; padding: 0; font-size: 15px; line-height: 1; }
.sofor-kesz { text-align: center; padding: 40px 16px; }
.sofor-kesz .nagy { font-size: 18px; }
.sofor-labl { margin-top: 20px; display: grid; gap: 8px; }

/* Megálló részletei */
.vissza-sor { margin-bottom: 6px; }
.megallo-lap h1 { margin-bottom: 2px; }
.megallo-cim-nagy { font-size: 16px; color: var(--halvany); margin-bottom: 12px; }
.sofor-gombsor { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gomb-szeru {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; min-height: 44px; flex: 1 1 140px;
  border: 1px solid var(--kek); border-radius: var(--sugar);
  background: var(--lap); color: var(--kek); text-decoration: none; font-weight: 600;
}
@media (hover: hover) { .gomb-szeru:hover { background: var(--kek-halvany); } }
.nagy-figyelem { font-size: 16px; font-weight: 600; }
.tetel-lista { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.tetel-lista li { padding: 5px 0; border-bottom: 1px solid var(--vonal-halvany); }
.tetel-lista li:last-child { border-bottom: none; }
.tetel-lista b { font-size: 18px; }
dl.adatok dd.kiemelt { font-size: 19px; font-weight: 700; letter-spacing: .05em; }
.megallo-lap .nagy { font-size: 16px; }
p.rendben.nagy { font-size: 16px; text-align: center; padding: 16px; }

.szeles-gomb { width: 100%; }
.nagy-gomb { min-height: 56px; font-size: 17px; font-weight: 600; }

/* Léptető: nagy + / − gombok, hogy kesztyűs kézzel is menjen */
.lepteto { margin-bottom: 16px; }
.lepteto > label { font-size: 15px; color: var(--tinta); font-weight: 600; margin-bottom: 2px; display: block; }
.lepteto-sor { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; }
.lepteto-sor input { text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lepteto-gomb { flex: 0 0 auto; width: 56px; min-height: 52px; font-size: 24px; line-height: 1; background: var(--kek-halvany); color: var(--kek); border-color: var(--kek-halvany); }
@media (hover: hover) { .lepteto-gomb:hover:not(:disabled) { background: #dde9f5; color: var(--kek-sotet); } }
.lepteto input[type=number] { font-size: 20px; min-height: 52px; }
.gyors-osszegek { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.gyors-osszegek button { min-height: 38px; padding: 4px 12px; }

/* Telefonméret: a párbeszéd teljes képernyős legyen */
@media (max-width: 720px) {
  dialog, dialog.szeles { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: none; margin: 0; padding: 16px; }
  dialog form { max-height: calc(100dvh - 130px); }
  dialog .gombsor { flex-wrap: wrap; gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
  dialog .gombsor button { flex: 1 1 30%; min-height: 48px; }
  dialog .gombsor button[type="submit"], dialog .gombsor button:not(.masodlagos):not(.link):last-child { flex: 2 1 55%; }
  .racs2 { grid-template-columns: 1fr; }
  .csempek { gap: 8px; }
  .csempe { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .fejsor-gombok { margin-left: 0; width: 100%; }
  .fejsor-gombok button { flex: 1 1 auto; min-height: 44px; }
  .kereso { width: 100%; flex: 1 1 100%; }
  button { min-height: 44px; }
}

/* ================================================================
   MOZGÁS — mikroanimációs réteg
   Elv: a felhasználó ne azt mondja, hogy „sok animáció van benne”, hanem hogy „smooth”.
   Csak transform és opacity (kivéve a valódi haladósávok szélessége). Minden időzítés és
   görbe tokenből jön. A reduced-motion blokk a fájl végén mindent kikapcsol.
   Az elemek nagy része innerHTML-lel születik újra, ezért a belépő animációk maguktól
   futnak le beszúráskor; kilépő animációt csak ott építünk, ahol az elem megmarad.
   ================================================================ */

:root {
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 320ms;
  --motion-progress: 600ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: ease;
  --motion-distance-small: 4px;
  --motion-distance-medium: 8px;
  --kek-aura: rgba(22, 104, 201, .08);
  --kek-halvany-atlatszo: rgba(22, 104, 201, .10);
}

/* ---- alap belépő ---- */
@keyframes belep { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes belep-balrol { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes belep-felulrol { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes belep-lentrol { from { opacity: 0; transform: translateY(var(--motion-distance-medium)) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes attunes { from { opacity: 0; } to { opacity: 1; } }
@keyframes ertek-frissul { from { opacity: .65; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes ertek-le { from { opacity: .6; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@keyframes lista-attunes { from { opacity: .7; } to { opacity: 1; } }

/* ---- oldalváltás: a #tartalom fő blokkjai lépcsőzve lépnek be (0/30/60/90 ms) ---- */
#tartalom > * { animation: belep var(--motion-slow) var(--ease-premium) both; }
#tartalom > :nth-child(2) { animation-delay: 30ms; }
#tartalom > :nth-child(3) { animation-delay: 60ms; }
#tartalom > :nth-child(n + 4) { animation-delay: 90ms; }
/* a csempesor maga nem animál — a csempéi külön, egymás után */
#tartalom > .csempek { animation: none; }
.csempek > .csempe { animation: belep 260ms var(--ease-premium) both; }
.csempek > .csempe:nth-child(1) { animation-delay: 30ms; }
.csempek > .csempe:nth-child(2) { animation-delay: 60ms; }
.csempek > .csempe:nth-child(3) { animation-delay: 90ms; }
.csempek > .csempe:nth-child(4) { animation-delay: 120ms; }
.csempek > .csempe:nth-child(n + 5) { animation-delay: 150ms; }
/* csendes (élő) frissítéskor nem játsszuk újra a belépést — csak a változott részek jeleznek */
#tartalom.csendes-frissites > *, #tartalom.csendes-frissites .csempek > .csempe,
#tartalom.csendes-frissites .ugyanitt, #tartalom.csendes-frissites .halado-sav span, #tartalom.csendes-frissites .sav { animation: none; }

/* ---- bal menü ---- */
#menu a { position: relative; transition: background var(--motion-fast) var(--ease-standard), transform 160ms var(--ease-premium), color var(--motion-fast); border-left-color: transparent; }
@media (hover: hover) { #menu a:hover { transform: none; } }
#menu a.aktiv { border-left-color: transparent; }
#menu a.aktiv::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 999px; background: var(--kek);
  animation: menu-jelzo 220ms var(--ease-premium) both; transform-origin: center;
}
@keyframes menu-jelzo { from { transform: scaleY(.4); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---- gombok ---- */
button {
  transition: transform var(--motion-fast) var(--ease-premium), box-shadow 150ms var(--ease-standard), background 150ms var(--ease-standard), border-color 150ms var(--ease-standard), color 150ms var(--ease-standard), opacity 150ms;
}
@media (hover: hover) { button:not(:disabled):not(.link):hover { transform: none; box-shadow: 0 2px 6px rgba(29, 39, 51, .12); } }
button:not(:disabled):active { transform: translateY(0) scale(.985); box-shadow: none; transition-duration: 80ms; }
@media (hover: hover) { button.link:not(:disabled):hover { transform: none; box-shadow: none; } }
button.link:not(:disabled):active { transform: scale(.985); }
button:disabled { transform: none !important; box-shadow: none !important; }
@media (hover: hover) { button.ikon:not(:disabled):hover { transform: none; } }

/* mentés folyamatban: apró, vékony loader a gomb végén (12 px), a felirat mellett */
@keyframes forog { to { transform: rotate(360deg); } }
button.mentes-folyik { position: relative; padding-right: 32px; }
button.mentes-folyik::after {
  content: ''; position: absolute; right: 11px; top: 50%; width: 12px; height: 12px; margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: forog 700ms linear infinite;
}
button.masodlagos.mentes-folyik::after, button.link.mentes-folyik::after { border-color: var(--kek-aura); border-top-color: var(--kek); }
button.link.mentes-folyik { padding-right: 18px; }
button.link.mentes-folyik::after { right: 0; width: 10px; height: 10px; margin-top: -6px; }

/* ---- űrlapmezők ---- */
input, select, textarea { transition: border-color 170ms var(--ease-standard), box-shadow 170ms var(--ease-standard), background var(--motion-normal); }
select.egy-opcio { pointer-events: none; background: var(--hatter); color: var(--halvany); appearance: none; -webkit-appearance: none; background-image: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--piros); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
input:focus, select:focus, textarea:focus { border-color: var(--kek); box-shadow: 0 0 0 3px var(--kek-aura); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.d-hiba:not([hidden]), #belepes-hiba:not([hidden]), #kod-hiba:not([hidden]) { animation: belep-felulrol 180ms var(--ease-premium) both; }
/* 409 után visszatöltött mező: a sárga lassan halványul, hogy legyen idő észrevenni */
@keyframes visszatoltott-halvanyul { from { background-color: var(--sarga); } to { background-color: #fff; } }
.visszatoltott { animation: visszatoltott-halvanyul 2200ms var(--ease-standard) 400ms both; }

/* ---- csempék ---- */
.csempe { transition: transform 180ms var(--ease-premium), border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard), background 180ms; }
@media (hover: hover) { a.csempe:hover { transform: none; border-color: #9cc3e8; box-shadow: 0 3px 10px rgba(29, 39, 51, .10); background: var(--lap); } }
a.csempe:active { transform: translateY(0); transition-duration: 80ms; }
/* csak az érték változott (élő frissítés): nem a kártya, a szám jelez */
.csempe b { display: block; }
.csempe b.ertek-valtozott { animation: ertek-frissul 180ms var(--ease-premium) both; }

/* ---- dialogok ---- */
@keyframes hatter-be { from { opacity: 0; } to { opacity: 1; } }
dialog[open] { animation: belep-lentrol 300ms var(--ease-premium) both; }
dialog[open]::backdrop { animation: hatter-be 200ms var(--ease-standard) both; }
dialog { box-shadow: 0 12px 40px rgba(29, 39, 51, .16); }

/* ---- toast ---- */
@keyframes toast-be { from { opacity: 0; transform: translate(-50%, 8px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes toast-ki { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 4px); } }
.uzenet:not([hidden]) { animation: toast-be 260ms var(--ease-premium) both; box-shadow: 0 6px 20px rgba(29, 39, 51, .18); }
.uzenet.eltunik { animation: toast-ki 180ms var(--ease-standard) both; }
/* hely a későbbi Minerál Center drop-check SVG-nek sikeres műveletnél */
.uzenet .siker-jel { display: inline-block; width: 0; height: 14px; vertical-align: middle; margin-right: 0; transition: width var(--motion-normal), margin var(--motion-normal); }
.uzenet .siker-jel:not(:empty) { width: 14px; margin-right: 8px; animation: siker-jel-be var(--motion-normal) var(--ease-premium) both; }
@keyframes siker-jel-be { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ---- táblázatok ---- */
tr.kattinthato { transition: background var(--motion-fast) var(--ease-standard); }
/* élőben, más által módosított sor: halvány kék, ami 1,4 mp alatt elolvad — nem villog, nem sárga */
@keyframes frissen-valtozott { from { background-color: var(--kek-halvany-atlatszo); } to { background-color: transparent; } }
tr.frissen-valtozott > td { animation: frissen-valtozott 1400ms var(--ease-standard) both; }
/* keresési találatok cseréje: rövid áttűnés, nem soronként */
tbody.frissul, .frissul { animation: lista-attunes 150ms var(--ease-standard) both; }

/* ---- haladósávok: megjelenéskor 0-ról a valódi értékre, változáskor a régiről az újra ---- */
@keyframes sav-be { from { width: 0; } }
.halado-sav span, table.korositas .sav { transition: width var(--motion-progress) var(--ease-premium); animation: sav-be var(--motion-progress) var(--ease-premium) both; }
.halado-sav span.nincs-belepes, .sav.nincs-belepes { animation: none; }
.sofor-halado > span { transition: opacity 180ms; }
.sofor-halado > span.ertek-valtozott { animation: ertek-frissul 180ms var(--ease-premium) both; }

/* ---- szűrőfülek ---- */
.szuro a { transition: background 220ms var(--ease-premium), box-shadow 220ms var(--ease-premium), color var(--motion-fast); }

/* ---- keresők találatszáma ---- */
#p-talalat, #g-talalat { transition: opacity 150ms; }

/* ---- élő kapcsolat jelző ---- */
@keyframes elo-pulzus { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, .28); } 50% { box-shadow: 0 0 0 4px rgba(46, 125, 50, 0); } }
@keyframes elo-baj { 0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .35); } 100% { box-shadow: 0 0 0 5px rgba(179, 38, 30, 0); } }
.elo-jelzo { transition: background var(--motion-normal); }
.elo-jelzo.jo { animation: elo-pulzus 3s var(--ease-standard) infinite; }
.elo-jelzo.baj { animation: elo-baj 600ms var(--ease-standard) 1; }

/* ---- „Angelika is ezt nézi” ---- */
.ugyanitt:not([hidden]) { animation: belep-balrol 220ms var(--ease-premium) both; }

/* ---- Mi történt lista: az új elem beúszik, a régiek maradnak ---- */
#valtozasok li { animation: belep-felulrol 220ms var(--ease-premium) both; }
#jelenlet li { animation: attunes var(--motion-normal) var(--ease-standard) both; }

/* ---- hálózati sáv ---- */
@keyframes sav-le { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sav-fel { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.halozat:not([hidden]) { animation: sav-le 280ms var(--ease-premium) both; transition: background var(--motion-normal); }
.halozat.rendben { background: var(--zold); }
.halozat.eltunik { animation: sav-fel 280ms var(--ease-premium) both; }

/* ---- adatátvétel: a következő lépés fokozatosan nyílik meg ---- */
#at-fajlinfo:not([hidden]), #at-lekepezes-doboz:not([hidden]), #at-futtatas-doboz:not([hidden]), #at-eredmeny:not(:empty),
#kar-blokk:not([hidden]), #csere-blokk:not([hidden]), #a-sema-tartalom:not(:empty), #b-integritas-eredmeny:not(:empty), #gd-eredmeny:not(:empty) {
  animation: belep 260ms var(--ease-premium) both;
}

/* ---- belépés → alkalmazás ---- */
#app:not([hidden]) { animation: attunes 300ms var(--ease-standard) both; }
.belepes.eltunik { animation: attunes 150ms var(--ease-standard) reverse both; }
.belepes { position: relative; overflow: hidden; }
/* dekorációs konténer a későbbi vízfelület-motívumnak: nem kattintható, nem tolja el a mezőket */
.belepes-hatter { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.belepes-doboz { position: relative; z-index: 1; }

/* ---- üres állapot: hely egy 48–80 px-es SVG-nek a szöveg fölött ---- */
.ures-kep { display: block; width: 64px; height: 0; margin: 0 auto; transition: height var(--motion-normal); }
.ures-kep:not(:empty) { height: 64px; margin-bottom: 10px; }

/* ---- sofőri felület ---- */
.megallo-kartya { transition: transform var(--motion-fast) var(--ease-premium), background 150ms, border-color 150ms; }
.megallo-kartya:not(:disabled):active { transform: scale(.985); transition-duration: 75ms; box-shadow: none; }
@media (hover: hover) { .megallo-kartya:not(:disabled):hover { transform: none; box-shadow: none; } }
@media (hover: hover) { .lepteto-gomb:not(:disabled):hover { transform: none; box-shadow: none; } }
.lepteto-gomb:not(:disabled):active { transform: scale(.92); transition-duration: 70ms; }
.lepteto-sor input.ertek-fel { animation: ertek-frissul 140ms var(--ease-premium) both; }
.lepteto-sor input.ertek-le { animation: ertek-le 140ms var(--ease-premium) both; }
.nagy-gomb.siker { background: var(--zold); border-color: var(--zold); }
/* hely a Minerál Center drop/check SVG-nek a „Minden megálló kész” állapotnál */
.brand-motivum { display: block; width: 72px; height: 0; margin: 0 auto; transition: height var(--motion-normal); }
.brand-motivum:not(:empty) { height: 72px; margin-bottom: 12px; }
.sofor-kesz { animation: belep var(--motion-slow) var(--ease-premium) both; }

/* ---- Minerál Center vízcsepp — csak a szerkezet, a grafika később kerül bele ----
   Használat: <span class="csepp tolt" aria-hidden="true"><span class="csepp-kontur">SVG</span><span class="csepp-folyadek">SVG</span></span>
   A folyadék a kontúr alatt alulról felfelé töltődik (clip-path), 800 ms-onként újra. Ez brand accent, nem általános ikon. */
.csepp { position: relative; display: inline-block; width: 20px; height: 26px; vertical-align: middle; }
.csepp > * { position: absolute; inset: 0; }
.csepp .csepp-folyadek { clip-path: inset(100% 0 0 0); }
@keyframes csepp-tolt { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.csepp.tolt .csepp-folyadek { animation: csepp-tolt 800ms var(--ease-standard) infinite; }
.csepp.siker { animation: siker-jel-be var(--motion-normal) var(--ease-premium) both; }

/* ================================================================
   Csökkentett mozgás: minden dekoratív mozgás gyakorlatilag azonnali.
   A funkcionális visszajelzések (loader, színek, sávok mérete) statikusan is látszanak.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  button.mentes-folyik::after { animation: none !important; border-top-color: transparent; }
  .elo-jelzo.jo { animation: none !important; }
}

/* ---------- Sofőrönkénti csoportok a rendelés-táblán ---------- */
tr.csoport-fej th { background: var(--kek-halvany); border-top: 2px solid var(--kek); border-bottom-color: var(--kek-halvany); padding: 7px 8px 5px; font-size: 13px; font-weight: 700; color: var(--kek-sotet); text-align: left; }
tr.csoport-fej th span + span { margin-left: 10px; font-weight: 500; opacity: .75; }
.gomb-szeru.masodlagos { background: var(--lap); color: var(--kek); border: 1px solid var(--kek); }

/* ---------- Napi lista elosztó ---------- */
.eloszto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 8px; }
.eloszto h3 { margin: 0 0 8px; font-size: 14px; }
.eloszto-lista { max-height: 52vh; overflow: auto; border: 1px solid var(--vonal); border-radius: 6px; padding: 6px 10px; background: var(--lap); }
.eloszto-varos { margin-bottom: 8px; }
.eloszto-varos > label.pipa { margin: 6px 0 2px; border-bottom: 1px solid var(--vonal-halvany); padding-bottom: 4px; }
.eloszto-sor { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; padding: 4px 6px; border-radius: 5px; font-size: 14px; }
.eloszto-sor.uj { background: var(--kek-halvany); justify-content: space-between; }
.eloszto-sor .sorszam { margin-left: auto; }
.eloszto-sor small { display: block; margin-top: 1px; }
.eloszto-jobb { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; }
.eloszto-sofor { border: 1px solid var(--vonal); border-radius: 6px; padding: 10px 12px; background: var(--lap); }
.eloszto-sofor h3 { display: flex; justify-content: space-between; align-items: baseline; }
.eloszto-sofor > button { margin-bottom: 6px; }
.varos-blokk { margin: 6px 0 12px; }
.varos-blokk summary { cursor: pointer; color: var(--kek); font-size: 14px; }
.varos-sorok { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px; }
.varos-sorok label.vonalban { justify-content: space-between; }
.varos-blokk p { margin: 10px 0 0; }
@media (max-width: 720px) { .eloszto, .varos-sorok { grid-template-columns: 1fr; } }

/* ---------- Kiszállítás rögzítése: pénz és a mellékes karácsonyi link ---------- */
.keszpenz-blokk { margin-top: 4px; }
.keszpenz-blokk .ft-jelzes { display: none; } /* a fizetendő sor mondja az összeget, nem kell kétszer */
.keszpenz-blokk .info { margin-top: -6px; }
.figyelem-szoveg { color: #8a5a00; }
.mellekes { margin: 6px 0 0; }
.mellekes button.link { font-size: 12.5px; color: var(--halvany); padding: 0; }
@media (hover: hover) { .mellekes button.link:hover:not(:disabled) { color: var(--kek); } }

/* ---------- Nyitott szállítólevelek ---------- */
.szl-reszlet { margin-top: 3px; font-size: 13px; }
.szl-reszlet summary { cursor: pointer; color: var(--kek); }
.szl-reszlet ul { margin: 4px 0 0; padding-left: 18px; color: var(--halvany); }
.szl-reszlet li { margin: 2px 0; }
.csempe.figyelem { border-color: var(--sarga); }

/* ---------- Irodai sofőri áttekintés ---------- */
.sofor-oszlopok { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.sofor-oszlop { margin-bottom: 0; }
.szamla-tetelek .halk-mezo { margin-top: 4px; font-size: 12.5px; color: var(--halvany); }
.dij-mezo { display: inline-flex; align-items: baseline; gap: 6px; }
.dij-mezo input.cella { width: 92px; text-align: right; }
.dij-mezo small { color: var(--halvany); }
/* Gépsorok a kiszállítás rögzítésénél: annyi, ahány gép mozgott */
.gep-sor { padding: 10px 12px; margin-bottom: 10px; }
.gep-sor-fej { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.gep-sor-fej select { flex: 1 1 auto; }
/* Visszalépés: egy lépés vissza az előzményben — hivatkozásnak látszik, de gomb */
.vissza-sor { margin: 0 0 10px; }
.vissza-gomb { background: none; border: 0; padding: 2px 0; color: var(--kek); font: inherit; cursor: pointer; box-shadow: none; }
.vissza-gomb:active { transform: none; }
@media (hover: hover) { .vissza-gomb:hover { text-decoration: underline; box-shadow: none; } }
.utvonal-gombok { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.utvonal-gombok .gomb-szeru { flex: 0 1 auto; }
.sofor-oszlop.cel-oszlop { outline: 2px dashed var(--kek); outline-offset: 2px; }
.sofor-oszlop .kor-tabla { min-height: 34px; }
.sofor-oszlop-fej { display: flex; align-items: baseline; gap: 10px; }
.sofor-oszlop-fej h3 { margin: 0; }
.sofor-oszlop-fej button.link { margin-left: auto; }
.halado-sav.kicsi { height: 5px; margin: 8px 0 6px; }
.kor-tabla { width: 100%; font-size: 14px; margin-top: 6px; }
.kor-tabla td { padding: 6px 6px; vertical-align: top; }
.kor-tabla td:first-child { width: 34px; }
.kor-tabla .muvelet { text-align: right; white-space: nowrap; }

/* ---------- Sorvégi műveletek: elsődleges gomb + „⋯” menü ---------- */
.muvelet-sor { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.eszkozsor details.tobbi > summary { width: 35px; height: 35px; }
.muvelet-sor > button { min-height: 32px; padding: 5px 12px; font-size: 13.5px; }
details.tobbi { position: relative; display: inline-block; }
details.tobbi > summary {
  list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: var(--sugar); border: 1px solid var(--vonal);
  background: var(--lap); color: var(--halvany); display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; letter-spacing: .05em; user-select: none; box-shadow: var(--arnyek-1);
  transition: background 150ms, color 150ms, border-color 150ms;
}
details.tobbi > summary::-webkit-details-marker { display: none; }
details.tobbi[open] > summary { background: var(--hatter); color: var(--tinta); border-color: #c3ccd5; }
@media (hover: hover) { details.tobbi > summary:hover { background: var(--hatter); color: var(--tinta); border-color: #c3ccd5; } }
.tobbi-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px;
  background: var(--lap); border: 1px solid var(--vonal); border-radius: 8px; padding: 5px; box-shadow: var(--arnyek-2);
  animation: belep-felulrol 160ms var(--ease-premium) both; text-align: left;
}
.tobbi-lista button.menu-tetel {
  display: block; width: 100%; text-align: left; background: none; border: none; box-shadow: none; color: var(--tinta);
  padding: 7px 10px; min-height: 0; border-radius: 5px; font-weight: 500; font-size: 14px; white-space: nowrap;
}
@media (hover: hover) { .tobbi-lista button.menu-tetel:hover:not(:disabled) { background: var(--hatter); transform: none; box-shadow: none; color: var(--tinta); } }
.tobbi-lista button.menu-tetel.veszelyes-link { color: var(--piros); }
@media (hover: hover) { .tobbi-lista button.menu-tetel.veszelyes-link:hover:not(:disabled) { background: var(--piros-halvany); color: var(--piros); } }
tr:has(details.tobbi[open]) { position: relative; z-index: 21; }
@media print { details.tobbi { display: none; } }

/* ---------- kereső a menüben és a gyors kereső (Ctrl+K) ---------- */
.menu-kereso {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 7px 10px; min-height: 34px;
  background: var(--hatter); color: var(--halvany); border: 1px solid var(--vonal-halvany); border-radius: var(--sugar);
  font-weight: 500; font-size: 13.5px; box-shadow: none; text-align: left;
}
.menu-kereso svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: 0 0 auto; }
.menu-kereso span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-kereso kbd { font: 11px/1 system-ui, sans-serif; color: var(--halvany); border: 1px solid var(--vonal); border-radius: 4px; padding: 2px 5px; background: var(--lap); }
@media (hover: hover) { .menu-kereso:hover:not(:disabled) { background: var(--lap); color: var(--tinta); border-color: var(--vonal); transform: none; box-shadow: var(--arnyek-1); } }
body.sofor-mod .menu-kereso { display: none; }
dialog.gyors { width: min(620px, 94vw); padding: 12px; margin-top: 8vh; border-radius: 12px; }
dialog.gyors #gk { font-size: 17px; min-height: 46px; padding: 8px 14px; }
.gyors-lista { margin-top: 8px; max-height: 50vh; overflow: auto; }
.gyors-fej { display: flex; gap: 8px; align-items: center; }
.gyors-fej #gk { flex: 1 1 auto; min-width: 0; }
.gyors-zar { display: none; flex: 0 0 auto; }
.gyors-tetel { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.gyors-tetel.aktiv { background: var(--kek-halvany); }
@media (hover: hover) { .gyors-tetel:hover { background: var(--kek-halvany); } }
.gyors-fo { flex: 1 1 auto; min-width: 0; }
.gyors-gombok { display: flex; gap: 10px; flex: 0 0 auto; }
.gyors-ures { padding: 14px 12px 6px; }
.gyors-labl { margin: 8px 4px 0; font-size: 12px; color: var(--halvany); }
.gyors-labl kbd { font: 11px/1 system-ui, sans-serif; border: 1px solid var(--vonal); border-radius: 4px; padding: 2px 5px; margin-right: 2px; background: var(--hatter); }

/* ---------- rendelésfelvétel: figyelmeztetés a partnernél ---------- */
.figyelmeztetes.kicsi { font-size: 13px; padding: 6px 10px 6px 12px; margin-bottom: 8px; }

/* ---------- húzd-és-ejtsd ---------- */
[draggable="true"] { cursor: grab; }
.huzas { opacity: .45; }
.eloszto-sofor.cel-aktiv { border-color: var(--kek); background: var(--kek-halvany); box-shadow: 0 0 0 3px var(--kek-aura); }
.kor-tabla tr.cel-fole td { box-shadow: inset 0 3px 0 var(--kek); }
.kor-tabla tr.cel-ala td { box-shadow: inset 0 -3px 0 var(--kek); }
.huzas-tipp { margin: 4px 0 0; font-size: 12.5px; }
.utvonal-link { margin-left: 10px; }
.zaras-tabla td { padding: 6px 8px; }

/* ---------- diagramok ---------- */
.diagramok { gap: 16px; margin-bottom: 4px; }
.diagram { width: 100%; height: auto; display: block; }
.diagram .racs { stroke: var(--vonal-halvany); stroke-width: 1; }
.diagram rect { transition: opacity 120ms; }
@media (hover: hover) { .diagram rect:hover { opacity: .75; } }
.diagram .idei { fill: var(--kek); }
.diagram .tavalyi { fill: #c5d3e0; }
.diagram .zold { fill: var(--zold); }
.diagram .tengely { font-size: 11px; fill: var(--halvany); text-anchor: middle; }
.jelmagyarazat { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--halvany); align-items: center; }
.jelmagyarazat i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.jelmagyarazat .idei { background: var(--kek); } .jelmagyarazat .tavalyi { background: #c5d3e0; } .jelmagyarazat .zold { background: var(--zold); }
.jelmagyarazat .halvany { margin-left: auto; }

/* ================================================================
   Sofőri felület — második kör: egy megálló a fókuszban, a többi csendben alatta
   ================================================================ */
body.sofor-mod { background: #eef2f6; }
body.sofor-mod #menu { background: var(--lap); box-shadow: 0 1px 0 var(--vonal); }
/* a sofőri fejléc vízszintes sáv, oda nem kell a kék tábla */
body.sofor-mod #menu .cegnev { font-size: 15px; margin: 0; padding: 0; background: none; color: var(--tinta); }
body.sofor-mod #menu .cegnev .marka-jel { background: linear-gradient(145deg, #4aa3f0, var(--kek-sotet)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
body.sofor-mod #menu .menu-alja button { border-color: var(--vonal); }
.sofor-fej { border-radius: 12px; box-shadow: var(--arnyek-1); }
.sofor-halado span b { color: var(--tinta); }
.kovetkezo-kartya {
  background: var(--lap); border: 1px solid var(--vonal); border-radius: 14px; padding: 16px 16px 14px; margin-bottom: 14px;
  box-shadow: 0 10px 28px rgba(22, 104, 201, .10), 0 1px 3px rgba(29, 39, 51, .06); border-top: 4px solid var(--kek);
}
.kovetkezo-fej { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.kovetkezo-fej .cimke { margin-left: auto; }
.kovetkezo-kartya h2 { font-size: 22px; margin: 0 0 2px; }
.kovetkezo-cim { font-size: 16px; color: var(--halvany); margin: 0 0 6px; }
.kovetkezo-tetel { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.kovetkezo-kartya .sofor-gombsor { margin: 0; }
.kovetkezo-kartya .nagy-gomb { flex: 1 1 100%; min-height: 54px; }
.szakasz-cim { margin: 14px 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--halvany); font-weight: 600; }
.megallo-kartya { border-radius: 12px; box-shadow: var(--arnyek-1); }
.megallo-kartya.varo { opacity: .75; cursor: default; }
.megallo-kartya.varo .megallo-szam { background: var(--halvany); }
.sofor-labl .sofor-gombsor { margin-bottom: 0; }
.nem-vette-sor { text-align: center; margin: 12px 0 0; }
.nem-vette-sor button.link { color: var(--halvany); }
.megallo-lap .doboz { border-radius: 12px; }
.megallo-lap h1 { font-size: 24px; }

/* fotó és aláírás a visszaigazoláson */
.melleklet-blokk { margin-top: 4px; display: grid; gap: 10px; }
.foto-gomb { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--tinta); }
.foto-gomb .gomb-szeru { flex: 0 0 auto; }
.foto-gomb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foto-elonezet { max-height: 180px; width: auto; border-radius: 8px; border: 1px solid var(--vonal); }
.alairas { display: grid; gap: 4px; }
.alairas canvas { width: 100%; height: auto; background: #fff; border: 1px dashed var(--vonal); border-radius: 8px; touch-action: none; }
.alairas button.link { justify-self: start; }
.mellekletek { display: flex; gap: 12px; flex-wrap: wrap; }
.mellekletek figure { margin: 0; display: grid; gap: 4px; font-size: 12.5px; }
.mellekletek img { max-width: 240px; max-height: 180px; border-radius: 8px; border: 1px solid var(--vonal); background: #fff; }
.mellekletek img.alairas { background: #fff; padding: 4px; }

/* telefonon a fejléc egy sor: márka balra, a sofőr neve és a kilépés jobbra */
body.sofor-mod #menu .cegnev, body.sofor-mod #menu .menu-alja { flex-basis: auto; }
body.sofor-mod #menu .cegnev span:last-child { display: none; }
body.sofor-mod #menu .belepett small { display: none; }
body.sofor-mod #menu .belepett b { font-size: 14px; white-space: nowrap; }
.lepteto .ft-jelzes { display: none; }

.tobbi-lista a.menu-tetel { display: block; padding: 7px 10px; border-radius: 5px; color: var(--tinta); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
@media (hover: hover) { .tobbi-lista a.menu-tetel:hover { background: var(--hatter); } }
.muvelet-sor .gomb-szeru { min-height: 32px; padding: 5px 12px; font-size: 13.5px; flex: 0 0 auto; }
table.rendeles-tabla tr[draggable] td:first-child { cursor: grab; }

/* ---------- modulok helye alap nézetben, nézetkapcsoló ---------- */
.modul-hely { border-style: dashed; background: #fbfcfd; }
.modul-hely h3 .cimke { margin-left: 8px; text-transform: none; letter-spacing: 0; }
.modul-hely p { color: var(--halvany); }
.modul-hely ul { margin: 0 0 8px; padding-left: 18px; color: var(--halvany); font-size: 13.5px; }
.modul-hely li { margin: 2px 0; }
.keszuloben-lap .modul-hely.nagy { max-width: 560px; margin: 0 auto; text-align: left; }
.keszuloben-lap .modul-hely.nagy .doboz { border-style: dashed; }
#menu a.keszuloben { color: var(--halvany); }
#menu a.keszuloben { flex-wrap: wrap; row-gap: 0; }
#menu a.keszuloben::after { content: 'hamarosan'; flex-basis: 100%; padding-left: 28px; font-size: 10.5px; line-height: 1.1; margin-top: -1px; color: var(--halvany); }
#menu a.keszuloben svg { opacity: .6; }
.nezet-kapcsolo { font-size: 12.5px; color: var(--halvany); margin: 0 0 8px; gap: 6px; }
.nezet-kapcsolo small { display: block; font-size: 11px; }
.modul-sor .doboz h4 { margin: 12px 0 6px; font-size: 13px; }
.kis-sor { font-size: 13.5px; padding: 3px 0; border-bottom: 1px solid var(--vonal-halvany); }
.kis-sor:last-child { border-bottom: none; }

/* ---------- ajánlat szerkesztő ---------- */
.aj-eszkozok { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.aj-eszkozok select { width: auto; max-width: 420px; flex: 1 1 260px; }
table.aj-tetelek input, table.aj-tetelek select { min-height: 32px; padding: 4px 8px; font-size: 14px; }
table.aj-tetelek input[type=number] { width: 84px; }
table.aj-tetelek [data-mezo=egyseg] { width: 64px; }
table.aj-tetelek .aj-leiras { margin-top: 4px; font-size: 12.5px; color: var(--halvany); }
table.aj-tetelek td { vertical-align: top; }
table.aj-tetelek .aj-kep { width: 52px; }
table.aj-tetelek .aj-kep img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vonal); }
table.aj-tetelek .muvelet button.link { text-decoration: none; margin-left: 4px; }
table.aj-tetelek tfoot th, table.aj-tetelek tfoot td { padding: 6px 10px; }
.aj-also { gap: 16px; }
.aj-also .lista-egyszeru li { display: flex; gap: 10px; align-items: center; }
.aj-also .lista-egyszeru li .veszelyes-link { margin-left: auto; }

/* ---------- termékképek ---------- */
.termek-kep { width: 32px; height: 32px; object-fit: cover; border-radius: 5px; border: 1px solid var(--vonal); vertical-align: middle; margin-right: 8px; background: #fff; }
.termek-kep.nagy { width: 96px; height: 96px; border-radius: 8px; }
.termek-kep-cella { overflow-wrap: anywhere; }
.termek-nev { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.termek-nev input.cella { flex: 1 1 auto; min-width: 0; }
.termek-nev .termek-kep { margin-right: 0; flex: 0 0 auto; }
.termek-kep-blokk { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
table.aj-tetelek [data-mezo=afa] { width: 74px; padding-right: 4px; }

.aj-elonezet { margin-top: 10px; }
.aj-elonezet summary { cursor: pointer; color: var(--kek); font-size: 14px; margin-bottom: 8px; }
iframe.elonezet.kicsi { height: 380px; }
.ar-jelzes { display: block; font-size: 11.5px; margin-top: 2px; white-space: nowrap; }
.ar-jelzes button.link { font-size: 11.5px; padding: 0; }
.sablon-link { font-size: 12px; margin-left: 6px; }

/* rendelések sofőri modul nélkül: hat oszlop */
table.rendeles-tabla.alap th:nth-child(5) { width: 12%; }
table.rendeles-tabla.alap th:nth-child(6) { width: 20%; }

/* dátummező a címke alatt, nem mellette */
label > input[type="date"] { display: block; }
.csempe b.szo { font-size: 17px; letter-spacing: 0; }
table.beallitasok input[type=number] { width: 140px; }
table.beallitasok textarea { min-height: 36px; }
/* termékek: rögzített oszlopok, hogy a művelet ne lógjon ki */
table.termek-tabla { table-layout: fixed; width: 100%; }
table.termek-tabla td, table.termek-tabla th { overflow-wrap: anywhere; }
/* Megnevezés | Kategória | Nettó | Bruttó | Beszerzés | Árrés | Készlet | művelet */
/* A számoszlopok nem tördelhetők, ezért kapnak elég helyet; a név és a kategória tördelődik.
   1366×768-on, 125% nagyításon mérve — így egyik cella sem csúszik a másikra. */
table.termek-tabla th:nth-child(1) { width: 22%; }
table.termek-tabla th:nth-child(2) { width: 12.5%; }
table.termek-tabla th:nth-child(3) { width: 10%; }
table.termek-tabla th:nth-child(4) { width: 13%; }
table.termek-tabla th:nth-child(5) { width: 12%; }
table.termek-tabla th:nth-child(6) { width: 8.5%; }
table.termek-tabla th:nth-child(7) { width: 11%; }
table.termek-tabla th:nth-child(8) { width: 11%; }
table.termek-tabla th { overflow-wrap: normal; }

/* párbeszédben a tételtábla számoszlopa ne tolja ki a mezőt a keretből */
dialog .tetel-tabla td.sz, dialog .tetel-tabla th.sz { width: 1%; white-space: nowrap; }
dialog .tetel-tabla input[type=number] { width: 84px; }
dialog form { padding-right: 2px; scrollbar-gutter: stable; }

.mai-szamok { margin-bottom: 10px; }
.mai-szamok dd b { font-size: 17px; font-variant-numeric: tabular-nums; }

.zaras-tabla td:first-child, .zaras-tabla td.sz { white-space: nowrap; }

/* ---------- egyszerűsítés: menücsoportok, becsukható oldalsáv, figyelnivalók, számlafülek ---------- */
#menu .menu-cim { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--kek-sotet); font-weight: 700; opacity: .72; padding: 12px 10px 4px; }
.oldalsav-csuk { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 6px; background: var(--lap); color: var(--halvany); border: 1px solid var(--vonal-halvany); box-shadow: none; font-size: 16px; line-height: 1; }
@media (hover: hover) { .oldalsav-csuk:hover:not(:disabled) { background: var(--hatter); color: var(--tinta); border-color: var(--vonal); } }
.oldalsav-nyit { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 56px; min-height: 0; padding: 0; border-radius: 8px 0 0 8px; background: var(--lap); color: var(--halvany); border: 1px solid var(--vonal); border-right: none; box-shadow: var(--arnyek-1); font-size: 16px; z-index: 6; }
@media (hover: hover) { .oldalsav-nyit:hover:not(:disabled) { transform: translateY(-50%); color: var(--tinta); } }
body.oldalsav-rejtve #app { grid-template-columns: var(--menu-szeles) minmax(0, 1fr) 0px; }
body.oldalsav-rejtve #oldalsav { opacity: 0; padding-left: 0; padding-right: 0; border-left-color: transparent; overflow: hidden; pointer-events: none; visibility: hidden; }
body.oldalsav-rejtve .oldalsav-nyit { display: block; }
body.sofor-mod .oldalsav-nyit { display: none !important; }
@media (max-width: 980px) { .oldalsav-nyit { display: none !important; } }
/* ---- figyelnivaló sor: jelzés | mondanivaló | művelet, három külön hasábban ----
   Fontos, hogy a jelzés ne abszolút pozícióval kerüljön a szöveg mellé, mert hosszú
   szövegnél vagy keskeny képernyőn ráfutott. Itt mindegyiknek saját helye van. */
ul.figyelo-lista { list-style: none; margin: 0; padding: 0; }
ul.figyelo-lista > li.ures-kicsi { padding: 8px 0; }
.fsor {
  --fszin: var(--kek); --fszin-halvany: var(--kek-halvany);
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 2px 10px;
  padding: 11px 0; border-bottom: 1px solid var(--vonal-halvany);
}
.fsor.tomor { padding: 8px 0; }
.fsor:last-child { border-bottom: none; }
.fsor.baj { --fszin: var(--piros); --fszin-halvany: var(--piros-halvany); }
.fsor.figyelem { --fszin: var(--narancs); --fszin-halvany: #fcf0e2; }
.fsor-ikon {
  grid-column: 1; grid-row: 1; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; background: var(--fszin-halvany); color: var(--fszin);
}
.fsor-ikon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fsor-fo { grid-column: 2; grid-row: 1; min-width: 0; }
.fsor-cim { display: block; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.35; }
@media (hover: hover) { a.fsor-cim:hover { color: var(--kek); text-decoration: underline; } }
.fsor-mi { display: block; color: var(--halvany); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.fsor-muvelet { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; white-space: nowrap; padding-left: 6px; }
/* keskenyen a művelet a szöveg alá kerül, de sosem a szövegre */
@media (max-width: 620px) {
  .fsor { grid-template-columns: 24px minmax(0, 1fr); }
  .fsor-muvelet { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin-top: 5px; padding-left: 0; }
}

.figyelo-osszegzes { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13.5px; }
.fo-jelzes { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--kek-halvany); color: var(--kek-sotet); }
.fo-jelzes b { font-size: 15px; }
.fo-jelzes.baj { background: var(--piros-halvany); color: var(--piros); }
.fo-jelzes.figyelem { background: #fcf0e2; color: var(--narancs); }
.figyelo-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.figyelo-racs .doboz { margin-bottom: 0; }
.figyelo-doboz .doboz-fej { align-items: center; gap: 8px; }
.figyelo-doboz .doboz-fej h3 { margin: 0; }
.figyelo-doboz .doboz-fej .sorszam { margin-left: 0; margin-right: auto; }
.figyelo-nyugi { text-align: center; padding: 34px 18px; }
.nyugi-pipa { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--zold-halvany); color: var(--zold); }
.nyugi-pipa svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.figyelo-nyugi .nagy { margin: 14px 0 6px; }
.szuro.fulek .sorszam { margin-left: 4px; background: var(--kek); color: #fff; }
.szuro-select { width: auto; min-height: 35px; }
.szuro.fulek { flex-wrap: wrap; }
.szuro.fulek a { white-space: nowrap; }

/* ================================================================
   Sima képernyőváltás. Ahol a böngésző tudja (View Transitions), a #tartalom régi képe áttűnik az
   újba; máshol a régi tartalom marad, amíg az új megjön, és egy rövid beúszás van. Üres villanás sehol.
   ================================================================ */
:root { view-transition-name: none; }
#tartalom { view-transition-name: tartalom; }
::view-transition-group(tartalom) { animation-duration: 0s; }
::view-transition-old(tartalom), ::view-transition-new(tartalom) { height: 100%; width: 100%; object-fit: none; object-position: top left; overflow: clip; }
::view-transition-old(tartalom) { animation: 130ms ease both at-ki; }
::view-transition-new(tartalom) { animation: 240ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both at-be; }
@keyframes at-ki { to { opacity: 0; } }
@keyframes at-be { from { opacity: 0; transform: translateY(5px); } }
/* áttűnéssel a blokkonkénti belépő fölösleges lenne (dupla mozgás) */
html.attunes-van #tartalom > *, html.attunes-van .csempek > .csempe { animation: none; }
html:not(.attunes-van) #tartalom > * { animation-duration: 200ms; animation-delay: 0ms; }
/* lassú betöltésnél vékony sáv a tartalom tetején — 250 ms után jelenik meg, gyors váltásnál nem is látszik */
#tartalom { position: relative; }
#tartalom.toltodik::before {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 35%; background: var(--kek); border-radius: 2px; opacity: 0;
  animation: toltes-sav 1.1s ease-in-out 250ms infinite;
}
@keyframes toltes-sav { 0% { left: 0; width: 10%; opacity: .9; } 50% { left: 35%; width: 40%; opacity: .9; } 100% { left: 100%; width: 10%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(tartalom), ::view-transition-new(tartalom) { animation: none; } }

/* ================================================================
   Mai nap — kiemelt csempék
   ================================================================ */
.kpi-sor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  --ton: var(--kek); --ton-halvany: rgba(22, 104, 201, .10);
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center;
  padding: 16px 18px 14px; border-radius: 14px; text-decoration: none; color: var(--tinta); overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, var(--ton-halvany), transparent 55%), var(--lap);
  border: 1px solid var(--vonal); box-shadow: 0 1px 2px rgba(29, 39, 51, .05), 0 8px 24px -12px rgba(29, 39, 51, .18);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.kpi.zold { --ton: var(--zold); --ton-vilagos: #2fa968; }
.kpi.piros { --ton: var(--piros); --ton-vilagos: #d24a41; }
.kpi.sarga { --ton: var(--narancs); --ton-vilagos: #e2932f; }
.kpi.lila { --ton: var(--lila); --ton-vilagos: #8a5fd6; }
/* A négy kiemelt csempe teli színes — ez fogja meg a szemet, ahogy a megbeszélt mintán */
.kpi { background: linear-gradient(135deg, var(--ton-vilagos, #2f86e0), var(--ton)); border-color: transparent; color: #fff; }
@media (hover: hover) { .kpi:hover { box-shadow: 0 1px 2px rgba(29, 39, 51, .05), 0 16px 30px -12px var(--ton); } }
.kpi-ikon { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); color: #fff; }
.kpi-ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-szam { font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.kpi.piros .kpi-szam { color: #fff; }
.kpi-cimke { font-size: 13px; color: rgba(255, 255, 255, .88); }
.kpi-al { grid-column: 1 / -1; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 12.5px; color: rgba(255, 255, 255, .95); font-weight: 500; }
.kpi-sav { grid-column: 1 / -1; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.kpi-sav i { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (max-width: 1400px) { .kpi-sor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.oldalsav-rejtve .kpi-sor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { body.oldalsav-rejtve .kpi-sor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-sor, body.oldalsav-rejtve .kpi-sor { grid-template-columns: 1fr; } }

/* ---------- egységes csempe: ugyanaz a nyelv, mint a Mai nap kiemelt csempéi ---------- */
.csempe {
  --ton-halvany: rgba(22, 104, 201, .08);
  border-radius: 14px; padding: 14px 16px 13px;
  background: radial-gradient(120% 140% at 100% 0%, var(--ton-halvany), transparent 55%), var(--lap);
  box-shadow: 0 1px 2px rgba(29, 39, 51, .05), 0 8px 24px -14px rgba(29, 39, 51, .16);
}
.csempe.baj { --ton-halvany: rgba(179, 38, 30, .10); }
.csempe.figyelem { --ton-halvany: rgba(232, 180, 60, .18); border-color: var(--vonal); }
.csempe b { font-size: 24px; }
@media (hover: hover) { a.csempe:hover { background: radial-gradient(120% 140% at 100% 0%, var(--ton-halvany), transparent 55%), var(--lap); } }

/* ---------- rendezhető oszlopfej ---------- */
th.rendezheto { cursor: pointer; user-select: none; }
@media (hover: hover) { th.rendezheto:hover { color: var(--tinta); } }
th.rendezheto::after { content: '↕'; margin-left: 5px; opacity: .3; font-size: 10px; }
th.rendezheto[aria-sort="ascending"]::after { content: '↑'; opacity: .9; color: var(--kek); }
th.rendezheto[aria-sort="descending"]::after { content: '↓'; opacity: .9; color: var(--kek); }

/* ---------- készpénz-elszámolás, első lépések, gépcsere a telefonon ---------- */
table.kp-tabla input[type=number] { width: 120px; text-align: right; }
table.kp-tabla td { vertical-align: middle; }
.elso-lepesek { border-left: 4px solid var(--kek); }
.elso-lepesek ol { margin: 0; padding-left: 20px; line-height: 1.9; }
.elso-lepesek li.kesz { color: var(--halvany); text-decoration: line-through; }
.gepcsere-blokk { margin: 4px 0 12px; border: 1px solid var(--vonal); border-radius: 10px; padding: 10px 12px; }
.gepcsere-blokk summary { cursor: pointer; font-weight: 600; color: var(--kek); }
.gepcsere-blokk[open] summary { margin-bottom: 10px; }
.megallo-kartya.hibas { border-color: var(--piros); opacity: 1; }
table.keszlet-tabla { table-layout: fixed; width: 100%; }
table.keszlet-tabla th:nth-child(1) { width: 17.5%; }
table.keszlet-tabla th:nth-child(2) { width: 10.5%; }
table.keszlet-tabla th:nth-child(3) { width: 10.5%; }
table.keszlet-tabla th:nth-child(4) { width: 11%; }
table.keszlet-tabla th:nth-child(5) { width: 11%; }
table.keszlet-tabla th:nth-child(6) { width: 11.5%; }
table.keszlet-tabla th:nth-child(7) { width: 15%; }
table.keszlet-tabla th:nth-child(8) { width: 13%; }
table.keszlet-tabla th { white-space: normal; overflow-wrap: normal; }
table.keszlet-tabla td { overflow-wrap: anywhere; }
/* a szerkeszthető cella az oszlop szélességéhez igazodik, nem fordítva */
table.keszlet-tabla td input.cella, table.termek-tabla td input.cella { width: 100%; min-width: 0; }
th.rendezheto::after { margin-left: 3px; }

/* ---------- finomítások a 2026. 09. 19-i végignézés után ---------- */
/* a négy kiemelt csempe 1280 px fölött egy sorban, tömörebben */
@media (min-width: 1280px) {
  .kpi-sor { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px 14px 12px; column-gap: 10px; }
  .kpi-ikon { width: 36px; height: 36px; border-radius: 10px; } .kpi-ikon svg { width: 19px; height: 19px; }
  .kpi-szam { font-size: 23px; }
}
table.gep-tabla th, table.termek-tabla th, table.rendeles-tabla th { letter-spacing: .03em; font-size: 11px; }
/* telefonon a párbeszéd jobb széle ne vágja le a léptetőgombot */
@media (max-width: 720px) { dialog form { padding-right: 10px; scrollbar-gutter: auto; } }
/* ⋯ menü billentyűzettel */
.tobbi-lista button.menu-tetel:focus-visible, .tobbi-lista a.menu-tetel:focus-visible { outline: none; background: var(--kek-halvany); }

/* ================================================================
   MOZGÁS — második kör (2026. 09. 19.): egységes, sima, semmi nem ugrik
   Elv maradt: transform és opacity, 120–320 ms, egy görbe (--ease-premium). Hoverre semmi nem mozdul el a kurzor
   alól (az vibrált) — a visszajelzés árnyék, szín és a lenyomás enyhe összenyomása.
   ================================================================ */
html { scroll-behavior: smooth; }

/* --- menü: egyetlen csúszó jelző az aktív pont mögött --- */
#menu { isolation: isolate; }
.menu-jelzo {
  position: absolute; left: 10px; right: 10px; top: 0; height: 34px; border-radius: var(--sugar); z-index: 0; pointer-events: none;
  background: var(--kek); box-shadow: 0 4px 12px -4px rgba(22, 104, 201, .5);
  transition: transform 300ms var(--ease-premium), height 300ms var(--ease-premium), opacity 200ms;
}
#menu a, #menu .cegnev, #menu .menu-kereso, #menu .menu-cim, #menu .menu-alja { position: relative; z-index: 1; }
#menu a.aktiv { background: transparent; color: #fff; }
#menu a.aktiv::before { content: none; }
#menu a svg { transition: color 200ms, transform 300ms var(--ease-premium); }
#menu a.aktiv svg { transform: scale(1.08); }
body.sofor-mod .menu-jelzo { display: none; }

/* --- fülek, szűrők: csúszó pirula --- */
.szuro.pirulas { position: relative; isolation: isolate; }
.szuro-pirula { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 6px; background: var(--lap); box-shadow: var(--arnyek-1); pointer-events: none;
  transition: transform 280ms var(--ease-premium), width 280ms var(--ease-premium), height 280ms var(--ease-premium); }
.szuro-pirula.azonnal { transition: none; }
.szuro.pirulas a { position: relative; z-index: 1; }
.szuro.pirulas a.aktiv { background: transparent; box-shadow: none; }

/* --- gombok --- */
button:not(:disabled):not(.link):active { transform: scale(.97); transition-duration: 70ms; }
@media (hover: hover) { button:not(.masodlagos):not(.link):not(.ikon):not(.menu-tetel):not(.lepteto-gomb):not(:disabled):hover { box-shadow: 0 4px 14px -4px rgba(22, 104, 201, .45), inset 0 1px 0 rgba(255, 255, 255, .14); } }
.gomb-szeru { transition: background 160ms, border-color 160ms, box-shadow 160ms, transform 120ms var(--ease-premium); }
.gomb-szeru:active { transform: scale(.97); }

/* --- párbeszéd: belép és ki is lép --- */
@keyframes dialog-ki { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes hatter-ki { to { opacity: 0; } }
dialog.zarul { animation: dialog-ki 170ms var(--ease-standard) both; }
dialog.zarul::backdrop { animation: hatter-ki 170ms var(--ease-standard) both; }

/* --- siker-pipa: a vonal megrajzolódik --- */
.uzenet .siker-jel svg { width: 14px; height: 14px; fill: none; stroke: #7be08a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
.uzenet .siker-jel path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: pipa-rajz 380ms var(--ease-premium) 120ms forwards; }
@keyframes pipa-rajz { to { stroke-dashoffset: 0; } }

/* --- táblasorok: lépcsőzve érkeznek, hoverre lágyan váltanak --- */
@keyframes sor-belep { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
tr.sor-belep { animation: sor-belep 300ms var(--ease-premium) both; }
tbody td { transition: background-color 140ms var(--ease-standard); }
#tartalom.csendes-frissites tr.sor-belep { animation: none; }

/* --- kiemelt csempék: egymás után érkeznek, a sáv nulláról fut fel --- */
@keyframes kpi-belep { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.kpi { animation: kpi-belep 420ms var(--ease-premium) both; }
.kpi:nth-child(2) { animation-delay: 60ms; } .kpi:nth-child(3) { animation-delay: 120ms; } .kpi:nth-child(4) { animation-delay: 180ms; }
.kpi-ikon { transition: transform 300ms var(--ease-premium); }
@media (hover: hover) { .kpi:hover .kpi-ikon { transform: scale(1.08) rotate(-3deg); } }
.kpi-sav i { animation: sav-be 900ms var(--ease-premium) 250ms both; }
.csempe { animation: kpi-belep 380ms var(--ease-premium) both; }
html.attunes-van .csempek > .csempe { animation: kpi-belep 380ms var(--ease-premium) both; }
.csempek > .csempe:nth-child(2) { animation-delay: 50ms; } .csempek > .csempe:nth-child(3) { animation-delay: 100ms; }
.csempek > .csempe:nth-child(4) { animation-delay: 150ms; } .csempek > .csempe:nth-child(n + 5) { animation-delay: 200ms; }
#tartalom.csendes-frissites .kpi, #tartalom.csendes-frissites .csempe, #tartalom.csendes-frissites .kpi-sav i { animation: none; }

/* --- dobozok: a képernyőváltás után finoman emelkednek a helyükre --- */
@keyframes doboz-belep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.attunes-van #tartalom .doboz, html.attunes-van #tartalom > .tabla { animation: doboz-belep 420ms var(--ease-premium) both; animation-delay: 80ms; }
html.attunes-van #tartalom.csendes-frissites .doboz, html.attunes-van #tartalom.csendes-frissites > .tabla { animation: none; }
.doboz { transition: box-shadow 220ms var(--ease-standard), border-color 220ms; }

/* --- lenyíló részek: a tartalom nem pattan, hanem kibomlik --- */
details[open] > *:not(summary) { animation: belep-felulrol 220ms var(--ease-premium) both; }
details > summary { transition: color 150ms; }

/* --- oldalsáv becsukása csúszik --- */
#app { transition: grid-template-columns 300ms var(--ease-premium); }
#oldalsav { transition: opacity 200ms var(--ease-standard), padding 300ms var(--ease-premium), visibility 0s linear 300ms; }
body:not(.oldalsav-rejtve) #oldalsav { transition: opacity 260ms var(--ease-standard) 120ms, padding 300ms var(--ease-premium); }
.oldalsav-nyit { animation: belep-balrol 260ms var(--ease-premium) both; }

/* --- csontváz az első betöltéskor --- */
@keyframes csillan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.csontvaz span { display: block; border-radius: 10px; background: linear-gradient(90deg, #e9eef3 25%, #f4f7fa 37%, #e9eef3 63%); background-size: 400% 100%; animation: csillan 1.4s ease-in-out infinite; }
.csontvaz .cs-cim { width: 38%; height: 28px; margin-bottom: 18px; }
.csontvaz .cs-sor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.csontvaz .cs-sor span { height: 92px; }
.csontvaz .cs-tabla { height: 300px; }

/* --- címkék, linkek, mezők apróságai --- */
.cimke { transition: background-color 200ms, color 200ms; }
a { transition: color 140ms; }
input[type="checkbox"] { accent-color: var(--kek); transition: transform 120ms var(--ease-premium); }
input[type="checkbox"]:active { transform: scale(.9); }
.gyors-tetel { transition: background-color 120ms; }
.megallo-kartya, .kovetkezo-kartya { animation: kpi-belep 380ms var(--ease-premium) both; }
.megallo-kartya:nth-of-type(2) { animation-delay: 50ms; } .megallo-kartya:nth-of-type(3) { animation-delay: 100ms; } .megallo-kartya:nth-of-type(n + 4) { animation-delay: 150ms; }
#tartalom.csendes-frissites .megallo-kartya, #tartalom.csendes-frissites .kovetkezo-kartya { animation: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .csontvaz span { animation: none; } }

/* ---- partner: kapcsolattartók, feljegyzések, vásárlási előzmény ---- */
.kapcsolat-lista li { padding: 8px 0; border-bottom: 1px solid var(--vonal-halvany); }
.kapcsolat-lista li:last-child { border-bottom: none; }
.kapcsolat-adat { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; margin-top: 2px; }
.jegyzet-uj { display: flex; gap: 8px; margin-bottom: 10px; }
.jegyzet-uj input { flex: 1 1 auto; min-width: 0; }
.idovonal { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.idovonal li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 7px 0 7px 12px; border-left: 2px solid var(--vonal); position: relative; }
.idovonal li::before { content: ''; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--kek); }
.idovonal .ido { font-size: 12.5px; color: var(--halvany); white-space: nowrap; }
.idovonal .szoveg { grid-column: 1 / -1; overflow-wrap: anywhere; }
.idovonal button.link { grid-row: 1; justify-self: end; font-size: 12.5px; }
.szakasz-cim { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--halvany); }
table.termek-osszesito td:first-child, table.elozmeny-tabla td:nth-child(4) { overflow-wrap: anywhere; }
table.elozmeny-tabla { table-layout: fixed; }
table.elozmeny-tabla th:nth-child(1) { width: 11.5%; } table.elozmeny-tabla th:nth-child(2) { width: 6%; }
table.elozmeny-tabla th:nth-child(3) { width: 13.5%; } table.elozmeny-tabla th:nth-child(4) { width: 21%; }
table.elozmeny-tabla th:nth-child(5) { width: 22%; } table.elozmeny-tabla th:nth-child(6) { width: 13.5%; }
table.elozmeny-tabla th:nth-child(7) { width: 12.5%; }

/* ---- számlakereső ---- */
.kereso-doboz { padding: 12px 14px 4px; margin-bottom: 14px; }
.kereso-doboz .eszkozsor { margin-bottom: 8px; }
.kereso.szeles { width: 340px; flex: 1 1 340px; max-width: 100%; }
.mezo-cimke { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--halvany); white-space: nowrap; }
.mezo-cimke input { min-height: 34px; }
.mezo-cimke input[type=number] { width: 118px; }
.kereso-doboz .pipa { margin: 0; font-size: 13.5px; }
#sz-db { margin: 0 0 8px; }
table.szamla-tabla { table-layout: fixed; }
table.szamla-tabla th:nth-child(1) { width: 13%; }
table.szamla-tabla th:nth-child(2) { width: 12%; }
table.szamla-tabla th:nth-child(3) { width: 15.5%; }
table.szamla-tabla th:nth-child(4) { width: 10%; }
table.szamla-tabla th:nth-child(5) { width: 11.5%; }
table.szamla-tabla th:nth-child(6) { width: 12.5%; }
table.szamla-tabla th:nth-child(7) { width: 13.5%; }
table.szamla-tabla th:nth-child(8) { width: 12%; }
table.szamla-tabla td { overflow-wrap: anywhere; }

/* ================================================================
   Napi tábla (vízfajtánként) és a heti sáv
   ================================================================ */
.doboz-fej { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.doboz-fej h3 { margin-bottom: 10px; }
.doboz-fej a { font-size: 13.5px; white-space: nowrap; }
.viz-csempek { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 14px; }
.viz-csempe { background: var(--hatter); border: 1px solid var(--vonal-halvany); border-radius: var(--sugar-nagy); padding: 11px 14px; min-width: 0; }
.viz-csempe b { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.viz-csempe span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--halvany); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-csempe.ossz { background: var(--kek-halvany); border-color: transparent; }
.viz-csempe.ossz b { color: var(--kek-sotet); }
.viz-csempe.halk b { color: var(--halvany); font-weight: 600; }
.napi-tabla-keret { margin-bottom: 0; box-shadow: none; }
table.napi-tabla { font-size: 14px; }
table.napi-tabla th, table.napi-tabla td { padding: 5px 8px; vertical-align: middle; border-right: 1px solid var(--vonal-halvany); }
table.napi-tabla th:last-child, table.napi-tabla td:last-child { border-right: none; }
table.napi-tabla td:first-child { min-width: 190px; }
table.napi-tabla td:first-child small { display: block; font-size: 12px; line-height: 1.3; }
table.napi-tabla td.sz { width: 92px; padding: 3px 4px; }
table.napi-tabla tr.kesz-sor td { background: #fafbfc; color: var(--halvany); }
table.napi-tabla tfoot th { background: var(--hatter); border-top: 2px solid var(--vonal); border-bottom: none; font-size: 15px; font-variant-numeric: tabular-nums; }
table.napi-tabla tfoot th[colspan] { font-weight: 500; color: var(--halvany); }
table.napi-tabla tfoot th[colspan] span { font-weight: 700; color: var(--kek-sotet); font-size: 16px; }
.cella-olvas { display: block; text-align: right; padding: 0 8px; font-variant-numeric: tabular-nums; }
/* a cella úgy néz ki, mint a táblázatkezelőben: keret csak akkor, ha rajta állunk */
.cella-gomb {
  width: 100%; min-height: 30px; padding: 4px 8px; text-align: left; border-color: transparent; background: transparent;
  box-shadow: none; border-radius: 6px; font-weight: 400; font-size: 13.5px; color: var(--tinta);
}
.cella-gomb:empty::before, .cella-gomb { white-space: normal; }
@media (hover: hover) { .cella-gomb:hover { border-color: var(--vonal); background: var(--lap); color: var(--tinta); } }
.cella-gomb:focus-visible { border-color: var(--kek); background: var(--lap); }
input.cella { width: 100%; min-height: 32px; padding: 4px 8px; border-color: transparent; background: transparent; box-shadow: none; border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
input.cella.szoveg { text-align: left; font-weight: 400; min-width: 150px; }
input.cella::placeholder { color: #c3ccd5; font-weight: 400; }
input.cella:focus { background: var(--lap); border-color: var(--kek); box-shadow: 0 0 0 3px var(--kek-aura); }
input.cella.ment { opacity: .55; }
input.cella.mentve { background: rgba(46, 125, 50, .12); transition: background 600ms var(--ease-standard); }
input.cella[type=number]::-webkit-outer-spin-button, input.cella[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.cella[type=number] { -moz-appearance: textfield; appearance: textfield; }
@media (hover: hover) { input.cella:hover:not(:focus) { border-color: var(--vonal); background: var(--lap); } }

.het-sav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.het-nap {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 11px 8px; border-radius: var(--sugar-nagy); text-decoration: none; color: var(--tinta);
  background: var(--lap); border: 1px solid var(--vonal-halvany); box-shadow: var(--arnyek-1);
  transition: border-color var(--motion-normal), box-shadow var(--motion-normal), background var(--motion-normal), transform 160ms var(--ease-premium);
}
.het-fej { display: flex; align-items: baseline; justify-content: space-between; gap: 0 6px; flex-wrap: wrap; }
.het-fej b { font-size: 13.5px; }
.het-fej small { color: var(--halvany); font-size: 12px; white-space: nowrap; }
.het-szam { font-size: 12.5px; color: var(--halvany); }
.het-szam b { font-size: 22px; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; margin-right: 3px; }
.het-nap ul { list-style: none; margin: 1px 0 2px; padding: 0; font-size: 12.5px; }
.het-nap li { display: flex; justify-content: space-between; gap: 6px; }
.het-nap li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--halvany); }
.het-nap li b { font-variant-numeric: tabular-nums; }
.napok-sav .het-szam b { color: var(--tinta); }
.nap-halado { height: 4px; border-radius: 4px; background: var(--vonal-halvany); overflow: hidden; margin: 3px 0 1px; }
.nap-halado i { display: block; height: 100%; border-radius: 4px; background: var(--zold); }
.napok-sav .het-nap.aktiv .nap-halado i { background: var(--kek); }
.het-lab { margin-top: auto; font-size: 11.5px; color: var(--halvany); }
.het-megjegyzesek { display: flex; flex-direction: column; gap: 1px; margin: 2px 0; padding: 4px 6px; border-radius: 6px; background: #fff6d8; font-size: 11.5px; line-height: 1.3; color: #6b4e00; }
.het-megjegyzesek span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.het-nap.ures-nap .het-szam b { color: #b6c0ca; }
.het-nap.ma .het-fej b::after { content: 'ma'; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--kek-halvany); color: var(--kek-sotet); font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.het-nap.aktiv { border-color: var(--kek); box-shadow: 0 0 0 1px var(--kek), var(--arnyek-2); }
.het-nap.aktiv .het-szam b { color: var(--kek-sotet); }
body.rendeles-huzas .het-nap:not(.aktiv) { border-style: dashed; border-color: var(--kek); }
.het-nap.cel { background: var(--kek-halvany); transform: scale(1.03); }
@media (hover: hover) { .het-nap:hover { border-color: var(--kek); } }
tr[data-athelyez] { cursor: grab; }
.nap-valaszto { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.nap-valaszto button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; min-height: 52px; }
.nap-valaszto small { color: var(--halvany); font-weight: 400; }
.rendeles-fej { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--hatter); border-radius: var(--sugar-nagy); align-self: start; }
.rendeles-fej b { font-size: 18px; letter-spacing: -.01em; }
.rendeles-fej a { font-size: 13.5px; margin-top: 4px; }
.tetel-fej { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 8px; }
.tetel-fej h3 { margin: 0; }
.tetel-fej input[type=search] { flex: 1 1 200px; max-width: 320px; min-height: 34px; }
.tetel-fej .pipa { margin: 0; }
@media (max-width: 820px) {
  .het-sav { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
  .het-sav::-webkit-scrollbar { display: none; }
  .het-nap { flex: 0 0 132px; scroll-snap-align: center; }
  .viz-csempek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .viz-csempe { padding: 9px 11px; }
  .viz-csempe b { font-size: 22px; }
  table.napi-tabla { min-width: 620px; }
  table.napi-tabla th:first-child, table.napi-tabla td:first-child { position: sticky; left: 0; background: var(--lap); z-index: 1; box-shadow: 1px 0 0 var(--vonal-halvany); min-width: 150px; }
  input.cella { min-height: 40px; font-size: 16px; }
  .tetel-fej input[type=search] { max-width: none; flex-basis: 100%; }
}

/* ================================================================
   Irodai felület telefonon (820 px alatt)
   Felül keskeny fejléc, a menü balról kihúzható fiók, alul a négy legtöbbet
   használt képernyő. A táblázatok kártyákká esnek szét, hogy ne kelljen oldalra görgetni.
   A sofőri nézet (body.sofor-mod) a saját fejlécét használja, arra ezek nem vonatkoznak.
   ================================================================ */
#mobil-fej, #also-sav { display: none; }
body.sofor-mod #menu .belepett { display: flex; align-items: center; gap: 6px; }
body.sofor-mod #menu .belepett .elo-jelzo { margin: 0; }
.erintos { display: none; }
@media (hover: none), (max-width: 820px) { .erintos { display: inline; } .egeres { display: none; } span.sorrend-gombok.erintos { display: inline-flex; gap: 6px; } }
.sorrend-gombok button { min-width: 44px; padding-left: 0; padding-right: 0; }

@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  /* érintésre ne maradjon szürke villanás, és dupla koppintásra ne nagyítson bele a gombokba */
  a, button, summary, label, input, select, .kattinthato { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  body { overscroll-behavior-y: none; }
  /* iOS 16 px alatt belenagyít a mezőbe */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 22px; height: 22px; flex: 0 0 22px; }
  button, .gomb-szeru { min-height: 44px; }
  button.link, .tobbi summary { min-height: 40px; }

  body:not(.sofor-mod) #app { display: block; padding-top: 54px; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  body:not(.sofor-mod) #tartalom { padding: 14px 12px 28px; }
  body.also-sav-nelkul:not(.sofor-mod) #app { padding-bottom: env(safe-area-inset-bottom); }
  body:not(.sofor-mod) #mobil-fej {
    display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 40;
    padding: 0 6px; background: var(--lap); border-bottom: 1px solid var(--vonal);
  }
  #mobil-fej b { flex: 1 1 auto; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-ikon { width: 44px; height: 44px; min-height: 44px; padding: 0; border: none; background: none; display: grid; place-items: center; border-radius: 12px; color: var(--tinta); }
  .mobil-ikon:active { background: var(--hatter); }
  .mobil-ikon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* kihúzható menü */
  body:not(.sofor-mod) #menu {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(304px, 86vw); height: 100dvh; z-index: 60;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%); visibility: hidden; box-shadow: none;
    transition: transform 280ms var(--ease-premium), visibility 0s linear 280ms, box-shadow 280ms var(--ease-standard);
  }
  body.menu-nyitva:not(.sofor-mod) #menu { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(23, 39, 51, .28); transition-delay: 0s; }
  body:not(.sofor-mod) #menu a { min-height: 46px; font-size: 15.5px; padding: 8px 12px; }
  body:not(.sofor-mod) #menu a svg { width: 20px; height: 20px; }
  body:not(.sofor-mod) #menu .cegnev { margin: -14px -12px 12px; }
  body:not(.sofor-mod) #menu .menu-cim { margin-top: 12px; }
  body:not(.sofor-mod) #menu .menu-kereso { display: none; }
  body:not(.sofor-mod) #menu .menu-alja { margin-top: 18px; }
  #menu-fatyol { position: fixed; inset: 0; z-index: 55; background: rgba(23, 39, 51, .42); animation: fatyol-be 220ms var(--ease-standard) both; }
  body.menu-nyitva { overflow: hidden; }
  .oldalsav-csuk, .oldalsav-nyit { display: none !important; }

  /* alsó sáv */
  body:not(.sofor-mod) #also-sav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--lap); border-top: 1px solid var(--vonal); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .also-elem {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 54px; padding: 5px 2px 3px;
    border: none; background: none; box-shadow: none; border-radius: 12px; color: var(--halvany); font-size: 11.5px; font-weight: 500; line-height: 1.15;
    transition: color 140ms var(--ease-standard), background 140ms var(--ease-standard);
  }
  .also-elem span { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; overflow-wrap: anywhere; }
  .also-elem svg { width: 24px; height: 24px; padding: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; transition: transform 200ms var(--ease-premium); }
  .also-elem svg.telt { fill: currentColor; stroke: none; }
  .also-elem.aktiv { color: var(--kek-sotet); font-weight: 650; }
  .also-elem.aktiv svg { color: var(--kek); transform: translateY(-1px) scale(1.06); }
  .also-elem.aktiv::before { content: ''; position: absolute; top: -5px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--kek); }
  .also-elem.fo { color: var(--kek-sotet); font-weight: 650; }
  .also-elem.fo svg { width: 30px; height: 30px; margin: -3px 0; padding: 5px; border-radius: 10px; color: #fff; stroke-width: 2.2; background: linear-gradient(145deg, #4aa3f0, var(--kek-sotet)); box-shadow: 0 3px 8px rgba(22, 104, 201, .28); }
  .also-elem:active { background: var(--hatter); }
  .also-elem:active svg { transform: scale(.92); }
  .also-jelveny { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 17px; padding: 0 4px; border-radius: 9px; background: var(--kek); color: #fff; font: 600 10.5px/17px inherit; font-style: normal; text-align: center; }
  #also-sav { animation: also-sav-be 220ms var(--ease-premium) both; }
  /* ami a sávba költözött, az fent nem kell még egyszer */
  body:not(.sofor-mod) .savban { display: none !important; }
  body:not(.sofor-mod) .fejsor-gombok:not(:has(> :not(.savban))) { display: none; }
  body:not(.sofor-mod) .eszkozsor:not(:has(> :not(.savban):not(.tolto))) { display: none; }
  .also-lap-lista { display: flex; flex-direction: column; gap: 2px; margin: 4px -6px 0; }
  .also-lap-lista .menu-tetel { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 10px; border: none; background: none; box-shadow: none; border-radius: 12px; font-size: 16px; text-align: left; color: var(--tinta); }
  .also-lap-lista .menu-tetel svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--halvany); }
  .also-lap-lista .menu-tetel.aktiv { background: var(--kek-halvany); color: var(--kek-sotet); font-weight: 600; }
  .also-lap-lista .menu-tetel:active { background: var(--hatter); }
  .also-lap-lista .also-jelveny { position: static; margin-left: auto; }
  body:not(.sofor-mod) .uzenet { bottom: calc(74px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); width: max-content; }

  /* fejsor, eszközsor, fülek */
  h1 { font-size: 21px; }
  .fejsor { flex-wrap: wrap; gap: 8px; }
  .eszkozsor { gap: 8px; }
  .eszkozsor .tolto { display: none; }
  .eszkozsor .kereso, .eszkozsor input[type="search"], .eszkozsor input[type="text"] { flex: 1 1 100%; width: 100%; }
  .eszkozsor > button, .eszkozsor > .gomb-szeru { flex: 1 1 auto; }
  .eszkozsor select { flex: 1 1 46%; min-width: 0; width: auto; }
  .szuro, .szuro.fulek { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; scroll-snap-type: x proximity; }
  .szuro::-webkit-scrollbar { display: none; }
  .szuro a { white-space: nowrap; flex: 0 0 auto; padding: 9px 14px; scroll-snap-align: center; }
  .doboz { padding: 14px; }
  .racs2, .racs3 { grid-template-columns: 1fr; }
  details.tobbi .tobbi-lap, details.tobbi > div { max-width: calc(100vw - 32px); }
  details.tobbi .menu-tetel { min-height: 46px; font-size: 15.5px; }

  /* táblázatból kártyasor */
  /* kártyás nézetben nincs értelme a rögzített oszlopoknak — az összenyomná a szöveget */
  table.kartyas { table-layout: auto; }
  table.kartyas, table.kartyas tbody, table.kartyas tfoot { display: block; width: 100%; background: none; }
  table.kartyas thead { display: none; }
  table.kartyas tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; align-items: start;
    background: var(--lap); border: 1px solid var(--vonal-halvany); border-radius: var(--sugar-nagy); padding: 11px 14px; margin-bottom: 8px;
    box-shadow: var(--arnyek-1);
  }
  table.kartyas td { display: block; width: auto !important; border: none; padding: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; min-width: 0; font-size: 15px; }
  table.kartyas td.sz { text-align: left; }
  /* a szerkeszthető cella töltse ki a kártya szélességét — nagyobb célfelület, és nem lóg ki */
  table.kartyas td input.cella, table.kartyas td select.cella { width: 100%; min-width: 0; }
  table.kartyas td[data-cimke]::before { content: attr(data-cimke); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--halvany); margin-bottom: 1px; }
  table.kartyas td[data-cimke=""]::before, table.kartyas td.muvelet::before { display: none; }
  table.kartyas td:empty, table.kartyas td.ures-cella { display: none; }
  table.kartyas td.kartya-cim { grid-column: 1 / -1; order: -1; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
  table.kartyas td.kartya-cim::before { display: none; }
  table.kartyas td.kartya-cim a { text-decoration: none; }
  table.kartyas td[colspan], table.kartyas td.muvelet, table.kartyas td.teljes { grid-column: 1 / -1; }
  table.kartyas td.muvelet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--vonal-halvany); }
  table.kartyas td.muvelet > button:not(.link), table.kartyas td.muvelet > .muvelet-menu { flex: 1 1 auto; }
  table.kartyas td.muvelet button + button { margin-left: 0; }
  table.kartyas tr:has(> td[colspan]:only-child) { background: none; border: none; box-shadow: none; padding: 10px 2px 2px; margin-bottom: 2px; }
  table.kartyas tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--hatter); box-shadow: none; border-color: transparent; padding: 9px 14px; margin-bottom: 4px; }
  table.kartyas tfoot th, table.kartyas tfoot td { display: block; border: none; padding: 0; background: none; width: auto !important; }
  table.kartyas tfoot th:empty, table.kartyas tfoot td:empty { display: none; }
  .aj-eszkozok { flex-wrap: wrap; }
  .aj-eszkozok select { flex: 1 1 100%; width: 100%; min-width: 0; }
  table.aj-tetelek.kartyas input, table.aj-tetelek.kartyas select, table.aj-tetelek.kartyas textarea { width: 100%; min-height: 44px; font-size: 16px; }
  table.aj-tetelek.kartyas td[data-cimke^="Megnevezés"] { grid-column: 1 / -1; order: -1; }
  table.kartyas tbody tr.osszesen { background: var(--hatter); box-shadow: none; border-color: transparent; }
  table.kartyas tbody tr.osszesen th { display: block; border: none; background: none; padding: 0; text-align: left; font-size: 15px; }
  table.kartyas tbody tr.osszesen th:first-child { grid-column: 1 / -1; }
  table.kartyas tbody tr.osszesen th[data-cimke]:not(:first-child)::before { content: attr(data-cimke); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--halvany); }
  table.kartyas tbody tr.osszesen th:empty { display: none; }
  table.kp-tabla.kartyas input { width: 100%; text-align: left; }
  table.kp-tabla.kartyas td[data-cimke="Megjegyzés"] { grid-column: 1 / -1; }
  /* az űrlap gombsora mindig a képernyő alján ül, rövid űrlapnál is */
  dialog:not(.megerosites):not(.gyors) > form { display: flex; flex-direction: column; }
  dialog:not(.megerosites):not(.gyors) > form > * { flex: 0 0 auto; }
  dialog:not(.megerosites):not(.gyors) > form > .gombsor { margin-top: auto; }
  dialog:not(.megerosites):not(.gyors) > .tabla { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-top: 12px; }
  table.kartyas tr.csoport-fej { display: block; background: none; border: none; box-shadow: none; padding: 12px 2px 2px; margin-bottom: 4px; }
  table.kartyas tr.csoport-fej th { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; white-space: nowrap; padding: 0; border: none; background: none; font-size: 15px; }
  table.kartyas .muvelet-sor { width: 100%; justify-content: stretch; gap: 8px; }
  table.kartyas .muvelet-sor > button, table.kartyas .muvelet-sor .gomb-szeru { min-height: 44px; font-size: 15px; flex: 1 1 auto; }
  table.kartyas .muvelet-sor > details.tobbi { flex: 0 0 auto; }
  table.kartyas details.tobbi > summary { min-width: 46px; min-height: 44px; }
  /* rendelések: a sorszám apró jelzés a sarokban, a cím és a tételek teljes szélességben */
  table.kartyas tr { position: relative; }
  table.kartyas td[data-cimke="#"] { position: absolute; top: 12px; right: 14px; font-size: 12.5px; color: var(--halvany); }
  table.kartyas td[data-cimke="#"]::before { content: '#'; display: inline; font-size: inherit; letter-spacing: 0; margin: 0; }
  table.kartyas td[data-cimke="#"] ~ td.kartya-cim { padding-right: 48px; }
  .doboz table.kartyas tr { box-shadow: none; background: var(--hatter); border-color: transparent; }
  table.rendeles-tabla.kartyas td[data-cimke="Cím"], table.rendeles-tabla.kartyas td[data-cimke="Tételek"] { grid-column: 1 / -1; }
  table.halmozott, table.halmozott tbody { display: block; width: 100%; }
  table.halmozott thead { display: none; }
  table.halmozott tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--vonal-halvany); }
  table.halmozott tr:last-child { border-bottom: none; }
  table.halmozott td, table.halmozott th { display: block; width: auto !important; border: none; padding: 2px 0; text-align: left; overflow-wrap: anywhere; }
  table.halmozott td:empty { display: none; }
  table.halmozott td.muvelet { display: flex; gap: 8px; align-items: center; text-align: left; }
  table.halmozott td.muvelet > button:first-child { flex: 1 1 auto; }
  table.kor-tabla.halmozott tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  table.kor-tabla.halmozott td.muvelet { grid-column: 1 / -1; }
  table.kor-tabla.halmozott td + td { margin-top: 0; }
  .sofor-oszlop-fej { flex-wrap: wrap; gap: 4px 12px; }
  .sofor-oszlop-fej h3 { flex: 1 1 100%; margin-bottom: 0; }
  table.halmozott td + td { margin-top: 6px; }
  table.halmozott td > button, table.halmozott td > input, table.halmozott td > select, table.halmozott td > textarea { width: 100%; }
  table.halmozott code { overflow-wrap: anywhere; white-space: normal; }
  table.statisztika th:first-child, table.statisztika td:first-child, table.korositas th:first-child, table.korositas td:first-child { position: sticky; left: 0; background: var(--lap); z-index: 1; box-shadow: 1px 0 0 var(--vonal-halvany); }
  /* a sokoszlopos kimutatás marad táblázat, de a saját dobozában görög oldalra */
  .doboz:has(> table:not(.kartyas)), .tabla-gorgeto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.statisztika, table.korositas { min-width: 640px; }
}
@media (max-width: 820px) {
  .kpi-sor, body.oldalsav-rejtve .kpi-sor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; }
  .kpi .kpi-ikon { width: 32px; height: 32px; }
  .kpi .kpi-szam { font-size: 21px; }
  .ures, table td.ures, table.rendeles-tabla td.ures { white-space: normal; text-align: center; padding: 28px 16px; }
}
@media (max-width: 820px) {
  /* az űrlap kitölti a képernyőt: a cím fent marad, a gombsor lent, közte görög a tartalom */
  dialog[open]:not(.megerosites):not(.gyors) { display: flex; flex-direction: column; padding: 0; }
  dialog:not(.megerosites):not(.gyors) > h2 { flex: 0 0 auto; margin: 0; padding: 14px 16px 12px; font-size: 18px; border-bottom: 1px solid var(--vonal-halvany); }
  dialog:not(.megerosites):not(.gyors) > form, dialog:not(.megerosites):not(.gyors) > .tabla, dialog:not(.megerosites):not(.gyors) > div { padding-left: 16px; padding-right: 16px; }
  dialog:not(.megerosites):not(.gyors) > form { flex: 1 1 auto; min-height: 0; max-height: none; padding-top: 12px; padding-bottom: 0; }
  dialog:not(.megerosites):not(.gyors) > .gombsor { margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  dialog form .gombsor { margin-left: -16px; margin-right: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 16px -12px rgba(23, 39, 51, .25); }
  /* a rövid kérdés alulról csúszik be, nem takarja ki az egész képernyőt */
  dialog.megerosites { width: 100vw; max-width: 100vw; height: fit-content; max-height: 80dvh; top: auto; bottom: 0; margin: 0; border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  dialog.gyors { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: none; }
  dialog.gyors .gyors-labl { display: none; }
  dialog.gyors .gyors-zar { display: inline-flex; align-items: center; }
  dialog.gyors .gyors-lista { max-height: none; }
  dialog.gyors .gyors-lista > * { min-height: 50px; }
}
@media (hover: hover) {
  #also-sav .also-elem:hover:not(:disabled), #mobil-fej .mobil-ikon:hover:not(:disabled), .also-lap-lista .menu-tetel:hover:not(:disabled) { background: var(--hatter); border-color: transparent; box-shadow: none; }
}
@keyframes also-sav-be { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fatyol-be { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body:not(.sofor-mod) #menu { transition: none; } #menu-fatyol { animation: none; } }

/* ---- figyelnivalók külön képernyőn ---- */


/* ---- ismétlődő rendelés: heti napok ---- */
.nap-pipak { border: 1px solid var(--vonal-halvany); border-radius: var(--sugar-nagy); padding: 8px 12px 10px; margin: 0 0 12px; }
.nap-pipak legend { padding: 0 6px; font-size: 13px; color: var(--halvany); }
.nap-pipak .pipa { display: inline-flex; margin: 2px 14px 2px 0; }
.nap-pipak small { display: block; margin-top: 4px; }

/* ---- számlaszerkesztő: bal oldalon az űrlap, jobbra az élő előnézet ---- */
.szamla-szerk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.szamla-elonezet { position: sticky; top: 0; }
.szamla-elonezet .elonezet { width: 100%; height: 520px; border: 1px solid var(--vonal); border-radius: var(--sugar-nagy); background: var(--lap); }
table.szamla-tetelek th, table.szamla-tetelek td { padding: 3px 5px; vertical-align: middle; }
table.szamla-tetelek input.cella, table.szamla-tetelek select.cella { min-height: 32px; }
table.szamla-tetelek td:first-child { min-width: 160px; }
table.szamla-tetelek tfoot th { background: var(--hatter); }
table.szamla-tetelek tfoot tr.osszesen th { font-size: 15.5px; }
.szamla-urlap .tetel-fej select { min-width: 180px; }
@media (max-width: 1100px) { .szamla-szerk { grid-template-columns: 1fr; } .szamla-elonezet { position: static; } .szamla-elonezet .elonezet { height: 360px; } }