/* Saját felület. A színek a beállításokból jönnek CSS-változóként (FELULET_SZINEK, alap.html);
   itt csak az elrendezés. Sarkok: 3 px. Betű: Arial, a feliratok keskenyítve, nagybetűvel (mint az FM-ben). */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Minden betűméret rem-ben, az alapméret egyetlen beállítás (FELULET_BETUMERET, alap.html): ezt állítva
   az egész felület arányosan nő vagy csökken. */
html { font-size: var(--betumeret, 15px); }
body { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; color: #000; background: #fff; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.felirat, .cimke, th, .gomb, .ful, .nav-felirat, .lepes { font-stretch: condensed; text-transform: uppercase; }
/* súgó- és mellékszövegek: ugyanaz a keskenyített betű, de kisbetűvel */
.sugo, .alapegyseg { font-stretch: condensed; }
.sugo { color: #6E6E6E; font-size: 0.9rem; margin-left: 6px; }

/* --- Keret: navigáció | lista | munkaterület --- */
.keret { display: grid; grid-template-columns: 110px 350px 1fr; height: 100vh; }
.keret.lista-nelkul { grid-template-columns: 110px 1fr; }

.nav { background: var(--oldalsav); color: #fff; display: flex; flex-direction: column; overflow-y: auto; }
/* logó: 90 × 44 képpontos hely (mag/logo.py); logó nélkül a terméknév */
.nav-logo { flex: none; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 10px;
  color: var(--logo); font-weight: bold; font-size: 1.267rem; letter-spacing: 1px; text-align: center;
  text-transform: uppercase; word-break: break-word; }
.nav-logo img { display: block; max-width: 90px; max-height: 44px; }
/* a menüpontok kitöltik a magasságot (legfeljebb 75 px), kisebb képernyőn összébb húzódnak (legalább 50 px) */
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 0; max-height: 75px; min-height: 50px; color: #E6E6E6; }
.nav-vonal { flex: none; height: 1px; background: #9A9A9A; margin: 3px 12px; }
.nav a:hover { background: var(--oldalsav-hover); color: #fff; }
.nav a.aktiv { background: var(--oldalsav-aktiv); color: #fff; }
.nav a.fejlesztoi { opacity: .75; }
.nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.nav-felirat { font-size: 0.833rem; }
.nav-also { flex: none; margin-top: auto; border-top: 1px solid #9A9A9A; }
.nav-also button { width: 100%; background: none; border: 0; color: #CDCDCD; padding: 12px 0; cursor: pointer;
  font-size: 0.8rem; text-transform: uppercase; font-stretch: condensed; }
.nav-also button:hover { color: #fff; background: var(--oldalsav-hover); }

/* --- Lista oszlop --- */
.lista { background: var(--lista-hatter); display: flex; flex-direction: column; min-height: 0; }
.lista-fej { background: var(--lista-fej); padding: 16px 12px 12px 20px; }
.lista-cim { display: flex; justify-content: space-between; align-items: baseline; color: #676767;
  font-weight: bold; text-transform: uppercase; font-stretch: condensed; }
.lista-cim h1 { font-size: 1.133rem; margin: 0; }
.lista-cim .db { font-size: 1.2rem; }
.lista-eszkoz { display: flex; gap: 8px; margin-top: 22px; }
.valaszto { margin-top: 10px; }
.valaszto select { width: 100%; padding: 4px 6px; border: 1px solid #CDCDCD; border-radius: 3px; background: #fff;
  font-size: .9rem; color: #444; }
.valaszto + .lista-eszkoz { margin-top: 10px; }
.kereso { flex: 1; display: flex; border: 1px solid #CDCDCD; background: #fff; border-radius: 3px; }
.kereso input { flex: 1; border: 0; padding: 5px 8px; font-size: 0.867rem; min-width: 0; border-radius: 3px; }
.kereso a { padding: 3px 8px; color: #6D91DA; font-size: 1.067rem; }
.kereso a[hidden] { display: none; }
.ujgomb { background: var(--gomb); color: #fff; border: 1px solid var(--gomb-keret); border-radius: 3px;
  padding: 5px 10px; font-size: 0.867rem; white-space: nowrap; text-transform: uppercase; font-stretch: condensed; }
.ujgomb:hover { background: var(--gomb-hover); }
.fulek { display: grid; grid-template-columns: 1fr 1fr; }
.ful { display: block; text-align: center; padding: 9px 4px; font-size: 0.867rem; background: var(--ful); color: #fff; }
.ful.aktiv { background: var(--ful-aktiv); color: #E6E6E6; }
.szurok { background: var(--ful-aktiv); display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 4px;
  padding: 16px 9px 18px; }
.szuro { background: var(--gomb); border: 1px solid var(--gomb-keret); color: #fff; border-radius: 3px;
  text-align: center; padding: 6px 2px; font-size: 0.9rem; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* mindig egysoros, egyforma magas */
.szuro:hover { background: var(--gomb-hover); }
/* a kiválasztott szűrő fordított (fehér, kék betűvel), hogy egy pillantásra látsszon */
.szuro.aktiv { background: #fff; color: var(--gomb-keret); border-color: #fff; font-weight: bold; }
.sorok { overflow-y: auto; flex: 1; border-top: 1px solid #DEDEDE; }
.sor { display: grid; grid-template-columns: 5px 1fr 100px; column-gap: 0; color: #fff;
  border-bottom: 1px solid #676767; min-height: 64px; }
.sor:hover { background: var(--lista-hover); }
.sor.halvany .partner, .sor.halvany .datum { opacity: .6; }
.sor-ikon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -2px; margin-right: 7px; }
/* a kijelölt rekord világos sávként kiemelkedik a sötét listából (nem kék: a kék a kattinthatóé) */
.sor.aktiv, .sor.aktiv:hover { background: var(--lista-kijelolt); color: #222; }
.sor.aktiv .datum { color: #676767; }
.sor.aktiv .statusz { border-bottom-color: #BDBDBD; }
.sor.aktiv .alsor { color: #333; border-top-color: rgba(0, 0, 0, .15); }
.sor .csik { grid-row: span 2; }
.sor .partner { font-weight: bold; padding: 14px 0 0 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sor .statusz { padding: 14px 6px 0 4px; font-size: 0.933rem; border-bottom: 1px dotted #9A9A9A; }
.lista.vonal-nelkul .sor .statusz { border-bottom: 0; }  /* pl. Beállítások: ott nincs jobb oldali adat */
.sor .datum { color: #CDCDCD; font-size: 0.867rem; padding: 4px 0 8px 25px; }
.sor .fiz { font-size: 0.933rem; padding: 4px 6px 8px 4px; }
.lapozo { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; color: #fff;
  padding: 8px 10px 12px; font-size: .9rem; }
.lapozo a { background: var(--gomb); border: 1px solid var(--gomb-keret); border-radius: 3px; font-size: 1.3rem;
  line-height: 1.3rem; padding: 2px 0 5px; }
.lapozo a:hover { background: var(--gomb-hover); }
/* a sor alsorai (pl. a gyártás tételei); a szem gombbal elrejthetők */
.sor .alsorok { grid-column: 2 / -1; display: block; padding: 0 6px 8px 25px; }
.sor .alsor { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: .85rem; color: #EDEDED;
  padding: 3px 0; border-top: 1px dotted rgba(255, 255, 255, .25); }
.lista.alsor-rejtve .alsorok { display: none; }
.alsor-valto { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; padding: 0;
  background: var(--gomb); border: 1px solid var(--gomb-keret); color: #fff; border-radius: 3px; cursor: pointer; }
.alsor-valto:hover { background: var(--gomb-hover); }
.alsor-valto svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.alsor-valto .csukott, .lista.alsor-rejtve .alsor-valto .nyitott { display: none; }
.lista.alsor-rejtve .alsor-valto .csukott { display: inline; }
.lista-ures { color: #E6E6E6; padding: 20px; font-size: 0.933rem; }

/* --- Munkaterület --- */
.munka { overflow-y: auto; padding: 0 30px; position: relative; display: flex; flex-direction: column; }
/* a tartalom kitölti a magasságot, így a „belépve” sor rövid lapon is a munkaterület alján van */
.munka-belso { flex: 1 0 auto; min-width: 0; padding-bottom: 30px; }
.uzenetek { padding-top: 10px; }
.uzenet { border-radius: 3px; padding: 9px 14px; margin-bottom: 6px; font-size: 0.933rem; }
.uzenet.success { background: #E8F5E9; color: #1B5E20; }
.uzenet.error { background: #FDECEA; color: #8E1B1B; }
.uzenet.info, .uzenet.warning { background: #FFF8E1; color: #6B4E00; }

/* a fejsáv (módosítás / mentés gombok) görgetéskor is látszik */
.fejsav { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 66px;
  border-bottom: 1px solid var(--vonal); margin-bottom: 10px; position: sticky; top: 0; z-index: 4; background: #fff; }
.fejsav h2 small { display: block; font-size: 0.8rem; color: var(--gomb); font-weight: normal; letter-spacing: .5px; }
.fejsav h2 { margin: 0; flex: none; font-size: 1.2rem; color: #676767; text-transform: uppercase; font-stretch: condensed; }
.fejsav .jelveny { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; }

.mezok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin: 8px 0 28px; }
.mezo { display: grid; grid-template-columns: 122px 1fr; align-items: center; min-height: 42px;
  border-bottom: 1px solid var(--vonal); }
.mezo.ures { border-bottom: 0; }
.mezok.oszlop-1 { grid-template-columns: minmax(0, 1fr); }
.mezok.oszlop-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* fülsor a fejadatok alatt (Részletek, Raktár, ...): a vonal teljes szélességben, a fülek jobbra */
.fulsav { display: flex; justify-content: flex-end; border-bottom: 1px solid var(--lista-aktiv); margin: 4px 0 18px; }
/* két oszlop: keskeny mezőcsoport balra, széles táblázat jobbra (pl. Beszerzés: Részletek | Tételek) */
.ketoszlop { display: grid; grid-template-columns: minmax(290px, 1fr) minmax(0, 2.4fr); column-gap: 36px; align-items: start; }
.nowrap { white-space: nowrap; }
.tablazat .kozep, .tablazat th.kozep { text-align: center; }
.logo-elonezet { display: inline-flex; align-items: center; justify-content: center; background: var(--oldalsav);
  border-radius: 3px; width: 130px; height: 70px; margin: 10px 0; }
.logo-elonezet img { max-width: 90px; max-height: 44px; }
.logo-elonezet .sugo { color: #ddd; font-size: .75rem; padding: 6px; text-align: center; }
.ketoszlop.egyenlo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.szakasz h3 svg.vonalas { fill: none; stroke: #808080; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mezo.szeles { grid-column: 1 / -1; grid-template-columns: 122px 1fr; }
.cimke { color: var(--cimke); font-size: 0.833rem; padding-right: 6px; }
.ertek { padding: 6px 7px; min-height: 20px; overflow: hidden; text-overflow: ellipsis; }
.ertek.vastag { font-weight: bold; }
.ertek select, .ertek input[type=text], .ertek input[type=date], .ertek input[type=number], .ertek input[type=email],
.ertek textarea { width: 100%; padding: 4px 6px;
  border: 1px solid #CDCDCD; border-radius: 3px; background: #fff; font-size: 0.967rem; }
.ertek select:disabled, .ertek input:disabled { background: var(--zarolt); color: #555; }
.ertek textarea { resize: vertical; font-family: inherit; display: block; }
.ertek input[type=checkbox] { width: 16px; height: 16px; margin: 4px 0; }
.ertek ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.ertek ul label { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.ertek .hiba, .tablazat .hiba { color: var(--veszely); font-size: 0.8rem; display: block; margin-top: 2px; }
.mezo.hibas, td.hibas { background: #FDECEA; }

/* --- Tételek --- */
.szakasz { display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--lista-aktiv); margin-top: 16px; }
.szakasz h3 { margin: 0 0 6px; color: #808080; font-size: 1.133rem; font-weight: normal; text-transform: uppercase;
  font-stretch: condensed; display: flex; align-items: center; gap: 10px; }
.szakasz h3 svg { width: 18px; height: 18px; fill: #808080; }
.nezetvalto { display: flex; }
.nezetvalto a { display: block; width: 112px; text-align: center; padding: 8px 0; font-size: 0.867rem;
  background: var(--ful); color: #fff; border: 1px solid var(--lista-aktiv); border-bottom: 0;
  text-transform: uppercase; font-stretch: condensed; }
/* az aktív fül a vonal elé kerül, és egybeolvad a fehér táblázatterülettel */
.nezetvalto a.aktiv { background: #fff; color: var(--lista-aktiv); position: relative;
  margin-bottom: -1px; padding-bottom: 9px; }
.nezetvalto a:hover:not(.aktiv) { background: var(--logo); }

.tablazat { width: 100%; border-collapse: collapse; margin-top: 22px; }
.tablazat th { background: var(--ful-aktiv); color: #fff; font-size: 0.833rem; font-weight: normal; padding: 9px 6px;
  border-left: 1px solid var(--vonal); border-right: 1px solid var(--vonal); text-align: center; }
.tablazat td { padding: 6px 7px; border-bottom: 1px solid var(--vonal); height: 37px; }
/* a fejléc mindig középre zárva (Attila, 10-17), a számok cellája jobbra */
.tablazat td.szam { text-align: right; }
.tablazat th, .tablazat th.szam { text-align: center; }
.tablazat td.kivitel { white-space: nowrap; font-size: 0.9rem; }  /* egysoros: ne nőjön meg a sor */
.tablazat td.kivitel form { margin: 0; }
form.sorban { display: inline; margin-left: 8px; }
.link-gomb { background: none; border: 0; padding: 0; color: var(--gomb-keret); cursor: pointer; font-size: .85rem;
  text-decoration: underline; font-stretch: condensed; }
.link-gomb:hover { color: var(--veszely); }
.link-gomb.semleges:hover { color: var(--gomb-keret); text-decoration: none; }  /* nem veszélyes művelet (pl. bontás) */
.tablazat td.kivitel form.bontas:not(:first-child) { margin-left: 10px; }
.tablazat td.keszlet { background: rgba(230, 230, 230, .5); }
.tablazat td.hiany { background: var(--hiany); color: var(--hiany-szoveg); font-weight: bold; }
.tablazat tr.kapcsolt td { color: #808080; font-size: 0.9rem; }
.tablazat tr.kapcsolt td:first-child { padding-left: 28px; }
.tablazat .gyartott { font-weight: bold; }
.tablazat .vegosszeg td { border-top: 1px solid var(--vonal); border-bottom: 0; font-weight: bold; font-size: 1.2rem;
  text-align: right; padding-top: 10px; height: 44px; }
.tablazat .vegosszeg .cimke { font-weight: normal; font-size: 0.833rem; margin-right: 10px; vertical-align: 2px; }
/* kapcsolt sorok elrejtése (szem ikon a terméknév fejlécében) */
.tablazat.kapcsolt-rejtve tr.kapcsolt { display: none; }
.szem { float: right; background: none; border: 0; padding: 0 2px; margin: -2px 0; cursor: pointer; color: #fff;
  line-height: 0; border-radius: 3px; }
.szem:hover { background: rgba(255, 255, 255, .2); }
.szem svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.szem .csukott, .kapcsolt-rejtve .szem .nyitott { display: none; }
.kapcsolt-rejtve .szem .csukott { display: inline; }
.megjegyzes-sor { margin: 8px 0 0; }
.idoszak { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .9rem; }
.idoszak input[type=date] { padding: 3px 5px; border: 1px solid #CDCDCD; border-radius: 3px; font: inherit; }
.jelolo-link { font-size: .85rem; color: #555; margin-bottom: 6px; font-stretch: condensed; text-transform: uppercase; }
.jelolo-link:hover { color: var(--gomb-keret); }
.naplosor { margin: 10px 0 18px; text-align: right; clear: both; }
.ful-tetelek > div { min-width: 0; }
.ful-csoportok + .ful-tetelek { margin-top: 10px; }
.tablazat .ures td { color: #9A9A9A; text-align: center; font-size: 0.933rem; }
.tablazat td input, .tablazat td select { width: 100%; padding: 4px 6px; border: 1px solid #CDCDCD;
  border-radius: 3px; font-size: 0.967rem; background: #fff; }
.tablazat td input.szam { text-align: right; }
.tablazat tr.torlendo td { opacity: .4; text-decoration: line-through; }
.alapegyseg { color: #808080; font-size: 0.867rem; margin-left: 4px; }
.mennyiseg-cella { display: flex; align-items: center; }

/* kereshető legördülő (felulet.js: keresoValaszto) */
.kvalaszto { position: relative; }
.ertek:has(.kvalaszto) { overflow: visible; }  /* a lenyíló lista ne vágódjon le */
.kvalaszto input.kv-be[type=text] { width: 100%; padding: 4px 22px 4px 6px; border: 1px solid #CDCDCD; border-radius: 3px; font-size: 0.967rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23808080' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 7px center / 10px 6px; }
.kv-be::placeholder { color: #A0A0A0; }
.kv-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #CDCDCD; border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.15); margin-top: 2px; }
.kv-elem { padding: 6px 9px; font-size: 0.967rem; cursor: pointer; text-transform: none; font-weight: normal; }
.kv-elem.kijelolt { font-weight: bold; }
.kv-elem.aktiv { background: var(--gomb); color: #fff; }
.kv-nincs { padding: 6px 9px; color: #9A9A9A; font-size: 0.9rem; }

/* dátum törlése (×) */
.datum-doboz { display: flex; align-items: center; gap: 4px; }
.datum-doboz input { flex: 1 1 auto; min-width: 0; }
.datum-torlo { flex: none; width: 24px; height: 24px; border: 0; border-radius: 3px; background: none; color: #808080;
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0; }
.datum-torlo:hover { background: #FDECEA; color: var(--veszely); }
.figyelmeztetes { text-align: center; font-size: 0.933rem; color: var(--hiany-szoveg); background: #FFF3DF; border-radius: 3px;
  padding: 6px 10px; margin: 10px 0 0; }

/* --- Gombok --- */
.gombsor { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.gombsor.muveletek { justify-content: flex-start; }
.gombkoz { width: 12px; }
.gombsor [hidden] { display: none; }
/* bezáró ✕ (mint a Risera Buildben): amíg nincs változás, a Mégse és a Mentés helyén */
.bezaro { font-size: 1.467rem; line-height: 1; color: #676767; padding: 2px 6px; border-radius: 3px; }
.bezaro:hover { background: #F2F2F2; color: #000; }
.gombsor form { margin: 0; }
.gomb { display: inline-flex; align-items: center; gap: 6px; border-radius: 3px; padding: 7px 14px; font-size: 0.9rem;
  border: 1px solid #CDCDCD; background: #fff; color: #444; cursor: pointer; white-space: nowrap; }
.gomb:hover { background: #F2F2F2; }
.gomb.fo { background: var(--gomb); border-color: var(--gomb-keret); color: #fff; }
.gomb.fo:hover { background: var(--gomb-hover); }
.gomb.veszely { color: var(--veszely); border-color: #E8B4B4; }
.gomb.veszely:hover { background: #FDECEA; }
.gomb.kicsi { padding: 3px 9px; font-size: 0.8rem; }
.gomb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.torlo { background: none; border: 0; cursor: pointer; padding: 4px; border-radius: 3px; color: var(--veszely); }
.torlo:hover { background: #FDECEA; }
.torlo svg { width: 18px; height: 18px; fill: currentColor; }
/* Gyártás: felhasznált alapanyag-LOT-ok (jelölt LOT, mellette a levétel ×) */
.lot-cimke { display: inline-flex; align-items: center; margin-right: 10px; white-space: nowrap; }
.lot-cimke form { display: inline; }
.lot-cimke .torlo { padding: 0 4px; font-size: 1.1rem; line-height: 1; }
.lab { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-top: 4px; }
/* a lábsor jobb oldala: a kapcsolódó dokumentum gombja (Rendelés → szállítólevél, Szállítás → rendelés ...),
   mindenhol ugyanígy (_kapcsolodok.html) */
.gombsor.kapcsolodok { margin-left: auto; }
.kapcsgomb { display: inline-flex; align-items: center; gap: 10px; background: var(--gomb); border: 1px solid var(--gomb-keret);
  color: #fff; border-radius: 3px; padding: 14px 32px; font-size: 0.933rem; text-transform: uppercase; font-stretch: condensed;
  white-space: nowrap; }
.kapcsgomb:hover { background: var(--gomb-hover); }
.kapcsgomb svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
/* átkattintás a kapcsolt rekordra (felulet/hivatkozas.py): kék, mint minden, ami kattintható */
a.kapcs { color: var(--gomb-keret); }
a.kapcs:hover { text-decoration: underline; }

/* --- Státuszsáv: a rendelés útja --- */
/* a fejléc sorában, a rendelésszám és a gombok között; szűkebb helyen a lépések összébb húzódnak */
.statuszsav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; justify-content: center; margin: 0 6px; }
.fejsav .gombsor { flex: none; }
.statuszsav form { margin: 0; }
.lepes { display: inline-flex; align-items: center; justify-content: center; width: 126px; min-width: 0; height: 30px; padding: 0 6px;
  border-radius: 3px; font-size: 0.833rem; border: 1px solid transparent; white-space: nowrap; font-family: inherit;
  overflow: hidden; text-overflow: ellipsis; }
.lepes.aktualis { background: var(--szin, var(--lista-aktiv)); color: #fff; font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.lepes.elore { background: var(--gomb); border-color: var(--gomb-keret); color: #fff; cursor: pointer; }
.lepes.elore:hover { background: var(--gomb-hover); }
.lepes.vissza { background: #fff; border-color: var(--gomb); color: var(--gomb); cursor: pointer; }
.lepes.vissza:hover { background: #EEF3FC; }
.lepes.mult { background: #E9E9E9; color: #7A7A7A; }
.lepes.jovo { background: #F5F5F5; color: #B4B4B4; }
.lepes.lemondott { background: var(--veszely); color: #fff; font-weight: bold; margin-left: 14px; }
/* szűk helyen a lépések a felirat szélességéig húzódnak össze, a hosszabb felirat nem vágódik le */
.statuszsav form { flex: 0 1 126px; min-width: max-content; }
.statuszsav > .lepes { flex: 0 1 126px; min-width: max-content; }
.statuszsav form .lepes { width: 100%; }
.lepes-nyil { width: 13px; height: 30px; flex: none; background: no-repeat center / 7px 12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23B4B4B4' stroke-width='1.4'/%3E%3C/svg%3E"); }

/* --- Szerkesztés közben a lista és a menü sötét fátyol alatt (előbb Mentés vagy Mégse) --- */
.keret.szerkesztes .nav, .keret.szerkesztes .lista { position: relative; }
.keret.szerkesztes .nav::after, .keret.szerkesztes .lista::after { content: ""; position: absolute; inset: 0; z-index: 30;
  background: rgba(20, 20, 20, .45); cursor: not-allowed; }
/* a fátyolra kattintva a kiút (Mentés / Mégse) felvillan */
@keyframes villan { 0%, 100% { box-shadow: 0 0 0 0 rgba(77, 132, 236, 0); } 30% { box-shadow: 0 0 0 5px rgba(77, 132, 236, .55); } }
.villan { animation: villan .45s ease-in-out 2; }

/* --- Saját kérdés- és üzenetablak (a böngésző ablakai helyett) --- */
.ablak-hatter { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; }
.ablak { background: #fff; border-radius: 3px; width: 430px; max-width: calc(100% - 32px); padding: 22px 24px 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.ablak p { margin: 0 0 20px; font-size: 1rem; line-height: 1.4; }
.ablak .gombsor { justify-content: flex-end; }
.ablak input.ablak-mezo { display: block; width: 160px; margin: -8px 0 20px; padding: 4px 6px; text-align: right;
  border: 1px solid #CDCDCD; border-radius: 3px; background: #fff; font-size: 1rem; }

/* --- Kezdőlap: mai teendők --- */
.kezdo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; align-items: start; }
.kezdo .szakasz h3 { text-transform: uppercase; }
.kezdo .szakasz h3.lejart { color: var(--hiany-szoveg); font-weight: bold; }
.teendo { display: grid; grid-template-columns: 52px 110px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 9px 6px; border-bottom: 1px solid var(--vonal); }
.teendo:hover { background: #F6F8FD; }
.teendo.surgos { background: #FFF6EA; }
.teendo.surgos:hover { background: #FFEFD9; }
.teendo-datum { color: #676767; font-size: .9rem; text-align: right; }
.teendo-szoveg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teendo-szoveg b { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teendo-szoveg .sugo { margin-left: 0; }
.teendo-tema { display: inline-block; border-radius: 3px; padding: 2px 8px; font-size: .75rem; color: #fff;
  text-transform: uppercase; font-stretch: condensed; text-align: center; background: #8C8C99; }
.tema-rendeles { background: var(--statusz-1); } .tema-szallitas { background: var(--statusz-4); }
.tema-beszerzes { background: var(--statusz-3); } .tema-fizetes { background: #B0723C; }
.tema-gyartas { background: var(--statusz-2); } .tema-keszlet { background: #5A7F8C; }
.tema-kartya { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px;
  border-bottom: 1px solid var(--vonal); font-size: .9rem; }
.tema-kartya:hover { background: #F6F8FD; }
.tema-kartya.aktiv { background: #EEF3FC; font-weight: bold; }
.kezdo-ures { padding: 20px 6px; font-size: 1rem; }
@media (max-width: 1300px) { .kezdo { grid-template-columns: minmax(0, 1fr); } }

/* --- Belépés --- */
.belepes { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--lista-hatter); }
.belepes form { background: #fff; border-radius: 3px; padding: 30px 34px; width: 340px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.belepes .nav-logo { background: var(--oldalsav); margin: -30px -34px 24px; border-radius: 3px 3px 0 0;
  flex-direction: column; height: 76px; letter-spacing: 2px; font-size: 1.6rem; }
.belepes .nav-logo small { font-size: .75rem; letter-spacing: 1px; color: #CDCDCD; font-weight: normal; margin-top: 2px; }
.belepes label { display: block; color: var(--cimke); font-size: 0.733rem; text-transform: uppercase; margin: 12px 0 4px; }
.belepes input { width: 100%; padding: 8px 10px; border: 1px solid #CDCDCD; border-radius: 3px; font-size: 1rem; }
.belepes .gomb { width: 100%; justify-content: center; margin-top: 20px; padding: 10px; }
.belepes .gomb + .gomb { margin-top: 8px; }
.belepes .sugo { margin: 10px 0 0; color: #8A8A8A; font-size: .8rem; }
.belepett a { color: inherit; }

/* --- Nagyított vagy kisebb képernyő (pl. Cmd/Ctrl + 110-125%): ne essen szét --- */
@media (max-width: 1400px) {
  .keret:not(.lista-nelkul) { grid-template-columns: 110px 310px 1fr; }
  .ketoszlop:not(.egyenlo) { grid-template-columns: minmax(0, 1fr); }
  .szuro, .ful { font-size: .8rem; }
}
@media (max-width: 1300px) {
  /* a mezők két oszlopban, a státuszsáv a rendelésszám alá kerül */
  .mezok:not(.oszlop-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mezo.ures { display: none; }
  .ketoszlop, .ketoszlop.egyenlo { grid-template-columns: minmax(0, 1fr); }
  .fejsav { flex-wrap: wrap; padding: 8px 0 6px; row-gap: 6px; }
  .statuszsav { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0; }
  /* a tervezőtáblák (beszerzéstervezés, gyártási javaslat) sok oszlopa beférjen, vízszintes görgetés nélkül */
  table.tervezes th { font-size: 0.733rem; padding-left: 3px; padding-right: 3px; }
  table.tervezes td { padding-left: 4px; padding-right: 4px; font-size: 0.9rem; }
  table.tervezes input.szam { min-width: 52px; }
  .tervezes-fej { gap: 16px; }
}
@media (max-width: 1450px) {
  /* a tervezőképernyőn a lista amúgy is fátyol alatt van: szűk helyen (110%-os nagyítástól) elrejtve, a táblázat
     kapja a helyét */
  .keret.tervezo { grid-template-columns: 110px 1fr; }
  .keret.tervezo > .lista { display: none; }
}

/* --- Keskeny képernyő: a lista a munkaterület fölé kerül --- */
@media (max-width: 900px) {
  .keret, .keret.lista-nelkul { grid-template-columns: 1fr; height: auto; }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav a { height: 60px; min-width: 76px; }
  .nav-logo, .nav-also { display: none; }
  .lista .sorok { max-height: 260px; }
  .munka { padding: 0 14px 20px; overflow: visible; }
  .mezok { grid-template-columns: 1fr; }
  .mezo.ures { display: none; }
  .tablazat-burok { overflow-x: auto; }
}

/* --- LOT-nyomkövetés (felulet/kepernyok/lot.py): a fa sorai behúzva, a második sor súgóbetűvel --- */
.lot-fa .sugo { margin-left: 0; }
.fejsav h2 .sugo { font-weight: normal; text-transform: none; }
.lot-fa .lotszam { white-space: nowrap; }
.lot-fa .ag { color: #A0A0A0; margin-right: 5px; }
.lot-fa tr.sztornozva td { opacity: .55; }
.lot-fa tr.sztornozva td.szam { text-decoration: line-through; }

/* --- Súgó gomb a képernyő címe mellett, és a belépett felhasználó a munkaterület alján (Attila, 10-17) --- */
.sugo-gomb { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  margin-left: 8px; border: 1px solid var(--gomb-keret); border-radius: 50%; background: #fff; color: var(--gomb-keret);
  font-size: .8rem; font-weight: bold; text-decoration: none; vertical-align: 2px; letter-spacing: 0; }
.sugo-gomb:hover { background: var(--gomb); color: #fff; }
.belepett { flex: none; position: sticky; bottom: 0; margin: 0 -30px; padding: 5px 0 6px; text-align: center;
  background: #fff; border-top: 1px solid var(--vonal); color: #8A8A8A; font-size: .8rem; font-stretch: condensed; z-index: 5; }
/* irodai rögzítés: az új sor a táblázat alján (felulet/kepernyok/gyartas.py RogzitesUrlap) */
.tablazat tr.uj-rogzites td { background: var(--zarolt); }
.tablazat tr.uj-rogzites select, .tablazat tr.uj-rogzites input { width: 100%; padding: 4px 6px; border: 1px solid #CDCDCD;
  border-radius: 3px; font-size: .9rem; }
.tablazat tr.uj-rogzites input { text-align: right; min-width: 56px; }
.tablazat td.kozep form { margin: 0; }

/* Oszlopszélesség (Attila, 10-17): a szám- és dátumoszlop csak akkora, amekkora a tartalma (egysoros); a szöveges
   oszlopok kapják a maradék helyet. A fejléc ilyenkor is törhet (két sorba). */
.tablazat td.szam, .tablazat td.datum, .tablazat td.kivitel { width: 1%; white-space: nowrap; }
/* a mértékegység egyforma széles helyen: így a számok egy oszlopban egymás alá kerülnek, akár „db”, akár „l” az egység */
.tablazat td.szam .alapegyseg { display: inline-block; min-width: 1.5em; text-align: left; white-space: nowrap; }

/* A Raktár alatti képernyők fix navigációja a lista fölött (felulet/kepernyok/raktar.py RAKTAR_RESZEK) */
.fejsorok { display: grid; grid-template-columns: 1fr 1fr; background: var(--oldalsav); border-bottom: 1px solid #9A9A9A; flex: none; }
.fejsor { color: #E6E6E6; text-decoration: none; padding: 9px 6px 9px 9px; font-size: .8rem; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; }
.fejsor .sor-ikon { margin-right: 5px; }
.fejsor:hover { background: var(--oldalsav-hover); color: #fff; }
.fejsor.aktiv { background: var(--oldalsav-aktiv); color: #fff; border-left-color: var(--logo); }

/* Beszerzéstervezés: fejsor (határidő, szűrők), sűrű táblázat beviteli mezőkkel */
.tervezes-fej { display: flex; align-items: center; gap: 28px; margin: 4px 0 10px; }
.tervezes-fej .mezo { display: flex; align-items: center; gap: 10px; border: 0; }
.tervezes-fej .kapcsolo { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--cimke); cursor: pointer; }
.tervezes-kereso { margin-left: auto; width: 220px; }
table.tervezes td { padding-top: 3px; padding-bottom: 3px; }
table.tervezes select { width: 100%; }
table.tervezes input.szam { width: 100%; min-width: 70px; }
.uzenet.kerekites { margin-top: 8px; }
table.tervezes .szuk { width: 1%; white-space: nowrap; }  /* csak a tartalma szélességét kapja (pl. egység) */