/* Huni terméktöltő — 8. kör: A VÉGLEGES ALKALMAZÁS.

   EGYETLEN oldal (Termékek), négy állapottal, és az átnézés egy FÓKUSZ-ABLAK
   fölötte — a háttér elsötétül és elmosódik, de közben él: jóváhagyáskor a
   termék valós időben átkerül a Feltöltve fülre.

   Betöltési sorrend:
     gep3-kozos.css → gep4-vegleges.css → gep5-kozos.css → gep6-kep.css → EZ

   Az ablak tartalma VÁLTOZATLANUL az elfogadott képernyő (gep-vegso.html):
   L2 elrendezés · K2 képes rész · M3 élő hibajelölés. Az 1. blokk szó szerint
   onnan van átemelve.                                                       */

/* ══════════════════════════════════════════════════════════════════════
   1. AZ ELFOGADOTT ÁTNÉZÉS-KÉPERNYŐ (gep-vegso.html, változatlanul)
   ══════════════════════════════════════════════════════════════════════ */

:root{--kulso-oldalt:24px;--kulso-fent:16px;--hasabkoz:24px;
  --oszlopok:minmax(300px,1.1fr) minmax(310px,1.05fr) minmax(265px,.8fr)}
.fal{max-width:1520px;width:100%;margin:0 auto}

.kcsik{overflow:hidden}
.knyil{opacity:1}
.kpontok{display:flex;justify-content:center;gap:5px;margin-top:7px}
.kpontok i{width:6px;height:6px;border-radius:50%;background:var(--keret-2);
  transition:background .15s,width .15s}
.kpontok i.itt{background:var(--kek);width:16px;border-radius:99px}

body{
  grid-template-rows:66px 1fr 40px;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(65,86,149,.13), transparent 62%),
    radial-gradient(900px 460px at 92% 108%, rgba(23,117,55,.09), transparent 60%),
    var(--papir);
}

/* ── a döntősor: a „Munkatárs által megerősítendő" blokk ALATT ──────── */
.dontosor{display:flex;gap:8px;flex:none}
.dontosor .g{flex:1;padding:10px 8px}
.dontosor .g.fo{flex:1.7;box-shadow:0 4px 14px rgba(23,117,55,.26)}

.info{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;
  margin-left:6px;border-radius:50%;background:var(--papir-2);color:var(--halvany);
  font-size:10px;font-weight:700;font-style:italic;cursor:help;flex:none}
.info:hover, .info:focus{background:var(--kek);color:#fff;outline:0}
.sugobuborek{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  width:266px;padding:11px 13px;border-radius:11px;background:var(--szoveg);color:#fff;
  font-size:11.5px;font-style:normal;font-weight:400;line-height:1.45;text-align:left;
  box-shadow:0 12px 30px rgba(19,26,44,.28);opacity:0;pointer-events:none;
  transition:opacity .15s;z-index:150}
.sugobuborek b{display:block;font-weight:600;margin-bottom:3px}
.sugobuborek em{display:block;margin-top:5px;font-style:normal;color:rgba(255,255,255,.68)}
.sugobuborek::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--szoveg)}
.info:hover .sugobuborek, .info:focus .sugobuborek{opacity:1}

/* Képenkénti újrafeldolgozás menüje — az ablak FÖLÖTT kell lennie */
.feldmenu{position:fixed;transform:translateY(-100%);z-index:420;min-width:250px;
  background:var(--lap);border:1px solid var(--keret);border-radius:12px;
  box-shadow:0 14px 40px rgba(19,26,44,.18);padding:6px;overflow:hidden}
.feldmenu .fej{padding:7px 10px 6px;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--halvanyabb);font-weight:600}
.feldmenu button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--szoveg)}
.feldmenu button:hover{background:var(--kek-50)}
.feldmenu button span{display:block;font-weight:400;font-size:11px;color:var(--halvany);
  margin-top:1px}
.kepgombok .g{flex:1;padding:6px 4px;font-size:11.5px}

/* az értesítés is az ablak fölé */
.pirit{z-index:440}

/* ══════════════════════════════════════════════════════════════════════
   2. FEJLÉC — egyetlen menüpont van, tehát nincs navigáció
   ══════════════════════════════════════════════════════════════════════ */
.appsav{position:relative;background:transparent;border:0;padding:0 22px;
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.appsav > *{position:relative;z-index:1}
.appsav::before{
  content:"";position:absolute;left:22px;right:22px;top:9px;bottom:9px;
  border-radius:999px;background:rgba(255,255,255,.6);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 34px rgba(19,26,44,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.appsav .marka{margin-left:16px;gap:9px}
.appsav .marka .bolt{padding:3px 9px;border-radius:999px;background:rgba(19,26,44,.06);
  font-size:11px;font-weight:600;color:var(--halvany);margin-left:2px}
.appjobb{margin-left:0;justify-self:end;margin-right:16px;gap:8px}

.fogas{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.55);
  display:grid;place-items:center;color:var(--halvany);box-shadow:var(--arny-1);
  transition:background .14s,color .14s}
.fogas:hover{background:#fff;color:var(--szoveg)}
.fogas.itt{background:var(--kek);color:#fff}
.fogas svg{width:16px;height:16px}

/* ── lábléc: peremtelen, a feltöltés csendes jelzője ────────────────── */
.alja{max-width:calc(1520px + 48px);width:100%;margin:0 auto;padding:0 24px;
  background:transparent;border:0;display:flex;align-items:center;gap:12px}
.alja .sugo{color:var(--halvanyabb);font-size:11.5px;margin-left:0}
.alja .sugo kbd{background:rgba(19,26,44,.05);border-color:transparent}
.feltjelzo{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:11.5px}
.feltjelzo .fut{display:inline-flex;align-items:center;gap:6px;color:var(--halvany)}
.feltjelzo .fut i{width:7px;height:7px;border-radius:50%;background:var(--kek);
  animation:lüktet 1s ease-in-out infinite}
@keyframes lüktet{50%{opacity:.25}}
.feltjelzo .kesz{color:var(--zold)}
.feltjelzo .rossz{color:var(--piros);font-weight:600}
.feltjelzo .hiba{border:1px solid #eab3ad;background:var(--piros-50);color:var(--piros);
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600}
.feltjelzo .hiba:hover{background:#fbdedb}

/* ══════════════════════════════════════════════════════════════════════
   3. LAPKERET
   ══════════════════════════════════════════════════════════════════════ */
#kozep{display:flex;flex-direction:column;min-height:0;overflow:hidden;
  container-type:inline-size}
#kozep > .lap{flex:1;min-height:0}

.lap{max-width:1520px;width:100%;margin:0 auto;padding:14px 24px 0;
  min-height:0;display:flex;flex-direction:column}
.lapfej{display:flex;align-items:flex-end;gap:16px;flex:none;margin-bottom:12px}
.lapfej h1{margin:0;font-size:21px;letter-spacing:-.3px;font-weight:600}
.lapfej p{margin:3px 0 0;font-size:12.5px;color:var(--halvany);max-width:66ch}
.lapfej .jobb{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

.torzs{flex:1;min-height:0;overflow-y:auto;padding-bottom:14px}
.torzs::-webkit-scrollbar{width:9px}
.torzs::-webkit-scrollbar-thumb{background:rgba(19,26,44,.16);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}

/* Elsődleges kék gomb. A ZÖLD ebben a rendszerben egyet jelent: jóváhagyás. */
.g.kek{background:var(--kek);border-color:var(--kek);color:#fff}
.g.kek:hover{background:var(--kek-700);border-color:var(--kek-700)}
.g.kek svg{width:14px;height:14px}

/* ══════════════════════════════════════════════════════════════════════
   4. A FÜLSOR — ez maga a folyamat
   ══════════════════════════════════════════════════════════════════════
   Fotózás (telefonon) › Feldolgozás alatt › Átnézésre kész › Félretett ›
   Feltöltve. Egyetlen menüpont van, tehát a folyamat ITT látszik.        */
.kapcsolo{display:inline-flex;align-items:center;gap:0;padding:3px;border-radius:12px;
  background:var(--papir-2);flex:none;margin-bottom:12px;align-self:flex-start}
.kapcsolo button{display:flex;align-items:center;gap:7px;padding:7px 13px;border:0;
  border-radius:9px;background:transparent;font-size:12.5px;font-weight:600;
  color:var(--halvany);white-space:nowrap}
.kapcsolo button:hover{background:rgba(255,255,255,.65);color:var(--szoveg)}
.kapcsolo button.itt{background:var(--lap);color:var(--szoveg);box-shadow:var(--arny-1)}
.kapcsolo button .db{min-width:19px;height:18px;padding:0 6px;border-radius:9px;
  background:rgba(19,26,44,.08);font-size:11px;font-weight:700;display:grid;
  place-items:center;font-variant-numeric:tabular-nums;color:var(--halvany)}
.kapcsolo button.itt .db{background:var(--kek);color:#fff}
.kapcsolo .fulnyil{width:13px;text-align:center;color:var(--halvanyabb);font-size:11px;
  opacity:.55;user-select:none;flex:none}

/* a telefonos lépés: a folyamat része, de gépen nincs teendő vele */
.kapcsolo .telefonful{display:flex;align-items:center;gap:6px;padding:7px 11px 7px 12px;
  font-size:12.5px;font-weight:600;color:var(--halvanyabb);cursor:default;white-space:nowrap}
.kapcsolo .telefonful svg{width:12px;height:12px;flex:none}
.kapcsolo .telefonful em{font-style:normal;font-size:10.5px;font-weight:500;opacity:.8}

/* ══════════════════════════════════════════════════════════════════════
   5. A LISTA — a Shopify-rendeléslista józansága
   ══════════════════════════════════════════════════════════════════════ */
.tabla{background:var(--lap);border:1px solid var(--keret);border-radius:14px;
  box-shadow:var(--arny-1);overflow:hidden}
.tsor{display:grid;grid-template-columns:var(--tosz);gap:14px;align-items:center;
  padding:11px 16px;border-bottom:1px solid var(--keret);min-width:0}
.tsor:last-child{border-bottom:0}
.tfej{background:var(--papir);position:sticky;top:0;z-index:2;padding:8px 16px}
.tfej span{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--halvanyabb);font-weight:600;min-height:1.25em}  /* az üres (kép-)cella is egy sorban */
.tsor.kattint{cursor:pointer;transition:background .12s}
.tsor.kattint:hover{background:var(--kek-25)}
.tsor.kival{background:var(--kek-50)}

/* oszlopképletek fülenként */
/* kijelölő négyzet */
.tbox{width:16px;height:16px;border-radius:4.5px;border:1.5px solid var(--keret-2);
  appearance:none;-webkit-appearance:none;background:var(--lap);display:grid;
  place-items:center;cursor:pointer;flex:none;margin:0;transition:background .12s,border-color .12s}
.tbox:hover{border-color:var(--kek-600)}
.tbox:checked{background:var(--kek);border-color:var(--kek)}
.tbox:checked::after{content:"";width:8px;height:4px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}

/* kijelölés-sáv a fejléc helyén */
.tfej.kijelolve{grid-template-columns:26px auto 1fr;background:var(--kek-50);
  border-bottom-color:var(--kek-100)}
.tfej.kijelolve .kszam{font-size:12px;font-weight:600;color:var(--kek-900);
  text-transform:none;letter-spacing:0}
.tfej.kijelolve .kmuv{justify-self:end;display:flex;gap:8px}

/* cellák */
.tkep{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--papir-2);
  border:1px solid var(--keret);flex:none}
.tnev{min-width:0}
.tnev b{display:block;font-size:13px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnev small{display:block;font-size:11px;color:var(--halvanyabb);margin-top:1px}
.tean{font-size:12px;color:var(--halvany);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tfoto{font-size:12px;color:var(--halvany);font-variant-numeric:tabular-nums}
.tfoto.keves{color:#8a5a2b}
.tmikor{font-size:11.5px;color:var(--halvanyabb);white-space:nowrap;line-height:1.4}
/* A „Mikor" második sora: MI történt. Roland (2026-08-28): „melyik termék
   került be ide épp, az most feldolgozás alatt van vagy átnézésre kész volt." */
.tmikor small{display:block;font-size:10px;color:var(--halvanyabb);opacity:.8;margin-top:1px}
.tveg{display:flex;justify-content:flex-end;color:var(--halvanyabb);font-size:15px}

/* állapot-jelvény */
.allap{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;max-width:100%}
.allap i{width:7px;height:7px;border-radius:50%;flex:none}
.allap.fut{background:var(--kek-50);color:var(--kek-900)}
.allap.fut i{background:var(--kek);animation:lüktet 1.1s ease-in-out infinite}
.allap.kesz{background:var(--zold-50);color:var(--zold)}
.allap.kesz i{background:var(--zold)}
.allap.felre{background:var(--sarga-50);color:var(--sarga)}
.allap.felre i{background:#d79c1a}
.allap.rossz{background:var(--piros-50);color:var(--piros)}
.allap.rossz i{background:var(--piros)}
/* ── A KÉT ÚJ ÁLLAPOT (2026-08-28) ──────────────────────────────────────
   A „Fotózásra vár" SZÁNDÉKOSAN nem sárga, pedig a telefonon az. Ott Editnek
   épp az a teendője; az irodában viszont ez nem figyelmeztetés, hanem sorban
   állás. A sárgát itt a Félretett kapja, mert AZ vár döntésre — ha mindkettő
   sárga lenne, a kettő egymásra mosódna a Mind-listában. */
.allap.foto{background:transparent;color:var(--halvany);
  box-shadow:inset 0 0 0 1px var(--keret-2)}
.allap.foto i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--halvanyabb)}
.allap.kint{background:var(--papir-2);color:var(--halvany)}
.allap.kint i{background:var(--halvanyabb)}

.allapcella{min-width:0;display:flex;flex-direction:column;gap:5px}
.allapcella .allap{align-self:flex-start;max-width:100%}
.halsav{height:3px;border-radius:99px;background:rgba(19,26,44,.08);overflow:hidden}
.halsav i{display:block;height:100%;background:var(--kek);border-radius:99px;
  transition:width .5s linear}
.okszoveg{font-size:11px;color:var(--halvany);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gujra{padding:5px 11px;font-size:11.5px;border-radius:8px}

.ures{padding:46px 20px;text-align:center;color:var(--halvany)}
.ures b{display:block;font-size:14px;color:var(--szoveg);margin-bottom:4px}
.ures p{margin:0;font-size:12.5px}

/* ── Feltöltve: napló, nem galéria ──────────────────────────────────── */
.slink{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--kek);text-decoration:none;padding:4px 9px;border-radius:8px;
  border:1px solid transparent}
.slink:hover{background:var(--kek-50);border-color:var(--kek-100)}
.slink svg{width:11px;height:11px}
.jovahagyo{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--halvany)}
.jovahagyo i{width:22px;height:22px;border-radius:50%;background:var(--papir-2);display:grid;
  place-items:center;font-size:9.5px;font-weight:700;color:var(--halvany);font-style:normal;
  flex:none}
/* 10-29: a nagyker gépi jóváhagyója: teherautó a monogram helyén, „Nagyker” / alatta szürkén „Speidel” */
.jovahagyo i.gep{background:var(--kek-50);color:var(--kek-600)}
.jovahagyo i.gep svg{width:12px;height:12px}
.jovahagyo .ketsor{display:flex;flex-direction:column;line-height:1.2}
.jovahagyo .ketsor small{font-size:10.5px;color:var(--halvanyabb)}
.osszegzo{display:flex;align-items:center;gap:18px;padding:11px 16px;margin-bottom:12px;
  background:var(--lap);border:1px solid var(--keret);border-radius:12px;
  box-shadow:var(--arny-1);flex:none;flex-wrap:wrap}
.osszegzo .tetel{display:flex;align-items:baseline;gap:7px}
.osszegzo .tetel b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.osszegzo .tetel span{font-size:12px;color:var(--halvany)}
.osszegzo .valaszto{width:1px;height:22px;background:var(--keret)}
.osszegzo .megj{margin-left:auto;font-size:11.5px;color:var(--halvanyabb);
  display:flex;align-items:center;gap:7px}
.osszegzo .megj svg{width:13px;height:13px;flex:none}

.friss{animation:beerkezik 2.2s ease-out}
@keyframes beerkezik{0%,60%{background:var(--zold-50)} 100%{background:transparent}}

/* ══════════════════════════════════════════════════════════════════════
   6. AZ ÁTNÉZÉS-ABLAK — teljes fókusz, élő háttérrel
   ══════════════════════════════════════════════════════════════════════
   Roland: „egy igényes popup jönne fel, ugyanolyan megjelenítéssel, és a
   háttér elsötétülne meg elmosódna egy kicsit, és teljes fókuszban lenne."  */
.ablakhatter{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:30px;background:rgba(19,26,44,.44);
  backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%);
  animation:hattersotet .18s ease-out}
@keyframes hattersotet{from{opacity:0}}

/* FIX MÉRET. Roland: „tök mindegy, hogy mekkora képernyőn nézik, akkor is
   ekkorába jelenjen meg ez a popup ablak — ha teljesen kinagyítom az ablakot,
   akkor alul elcsúszik lefelé, és furán néz ki."
   Az ablak ezért NEM nyúlik a képernyővel: fix 1584×880 a mérete, és csak
   akkor zsugorodik, ha kisebb a hely nála. A 880 px MÉRT érték: 840-nél a
   harmadik hasáb tartaléka 10 px-re esett — az élesben, hosszabb AI-leírásnál
   NÉMÁN levágná a szöveget. 1000-nél viszont 200 px fölött volt a tartalék, és
   az látszott üresnek alul. A főképet ez nem érinti: azt a hasáb SZÉLESSÉGE
   korlátozza, nem a magasság.                                              */
.ablak{width:min(100%,1584px);height:min(100%,880px);display:grid;
  grid-template-rows:48px 1fr 58px;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(65,86,149,.13), transparent 62%),
    radial-gradient(900px 460px at 92% 108%, rgba(23,117,55,.09), transparent 60%),
    var(--papir);
  box-shadow:0 40px 90px -20px rgba(19,26,44,.5), 0 0 0 1px rgba(255,255,255,.6);
  animation:ablakbe .2s cubic-bezier(.2,.8,.3,1)}
@keyframes ablakbe{from{transform:translateY(10px) scale(.985);opacity:0}}

.ablakfej{display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--keret)}
.ablakfej .acim{font-size:13px;font-weight:600;letter-spacing:-.1px}
.ablakfej .hany{font-size:12.5px;font-weight:600;color:var(--halvany);
  font-variant-numeric:tabular-nums}
.ablakfej .sin{width:130px;height:4px;border-radius:99px;background:rgba(19,26,44,.09);
  overflow:hidden;flex:none}
.ablakfej .sin i{display:block;height:100%;background:var(--kek);transition:width .25s}
.ablakfej .azar{margin-left:auto}
.ablakfej .feltjelzo{margin-left:auto}
.azar{width:30px;height:30px;border-radius:9px;border:0;background:transparent;
  display:grid;place-items:center;color:var(--halvany);flex:none;margin-left:12px}
.azar:hover{background:rgba(19,26,44,.07);color:var(--szoveg)}
.azar svg{width:16px;height:16px}

.ablaktorzs{min-height:0;display:flex;flex-direction:column}
.ablaktorzs > .fal{flex:1;min-height:0}
/* ── FIX LÁBLÉC (Roland, 2026-09-01 este): balra a gyorsbillentyű-sáv,
   jobbra a Félreteszem + Jóváhagyom — a fejlécben csak a cím, a számláló,
   a sín és a bezárás marad. ────────────────────────────────────────── */
.ablakalja{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 16px 0 20px;background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid rgba(19,26,44,.07)}
.ablakalja .sugo{color:var(--halvanyabb);font-size:11.5px}
.ablakalja kbd{display:inline-block;padding:0 5px;border:1px solid transparent;
  border-bottom-width:2px;border-radius:4px;background:rgba(19,26,44,.05);font:inherit;
  font-size:10.5px;font-weight:600;color:var(--halvany)}

/* ══════════════════════════════════════════════════════════════════════
   7. BEÁLLÍTÁSOK — a fogaskerék mögött
   ══════════════════════════════════════════════════════════════════════ */
.beall{display:grid;grid-template-columns:214px 1fr;gap:20px;min-height:0;flex:1;
  padding-bottom:14px}
.bmenu{display:flex;flex-direction:column;gap:2px;flex:none}
.bmenu button{display:flex;align-items:center;gap:9px;padding:9px 12px;border:0;
  border-radius:9px;background:transparent;font-size:12.5px;font-weight:500;
  color:var(--halvany);text-align:left}
.bmenu button:hover{background:rgba(255,255,255,.7);color:var(--szoveg)}
.bmenu button.itt{background:var(--lap);color:var(--szoveg);font-weight:600;
  box-shadow:var(--arny-1)}
.bmenu .fejlec{padding:10px 12px 6px;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--halvanyabb);font-weight:600}
.bmenu .admin{margin-top:10px;padding:9px 11px;border-radius:9px;background:var(--sarga-50);
  border:1px solid var(--sarga-200);font-size:11px;line-height:1.4;color:var(--sarga)}

.bpanel{background:var(--lap);border:1px solid var(--keret);border-radius:14px;
  box-shadow:var(--arny-1);padding:18px 20px;overflow-y:auto;min-height:0}
.bpanel h2{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:-.2px}
.bpanel .alcim{margin:0 0 16px;font-size:12.5px;color:var(--halvany);max-width:74ch}
.bpanel h3{margin:20px 0 8px;font-size:12.5px;font-weight:600}
.bpanel h3:first-of-type{margin-top:0}
.halkszoveg{font-weight:400;font-size:12px;color:var(--halvany)}

.mert{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  background:var(--kek-50);color:var(--kek-900);font-size:10.5px;font-weight:600}
.figy{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  background:var(--sarga-50);color:var(--sarga);font-size:10.5px;font-weight:600;
  border:1px solid var(--sarga-200)}

.rtabla{width:100%;border-collapse:collapse;font-size:12.5px}
.rtabla th{text-align:left;padding:7px 10px;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--halvanyabb);font-weight:600;
  border-bottom:1px solid var(--keret)}
.rtabla td{padding:8px 10px;border-bottom:1px solid var(--keret)}
.rtabla tr:last-child td{border-bottom:0}
.rtabla .szam{font-variant-numeric:tabular-nums;color:var(--halvany);white-space:nowrap}
.rtabla .ut{color:var(--halvany);font-size:12px}

.kapcs{position:relative;width:36px;height:20px;border-radius:99px;border:0;
  background:var(--keret-2);flex:none;transition:background .16s}
.kapcs::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:var(--arny-1);transition:transform .16s}
.kapcs.be{background:var(--kek)}
.kapcs.be::after{transform:translateX(16px)}
/* ⭐ ÁLLAPOTJELZŐ, NEM KAPCSOLÓ (2026-09-12). A Beállítások tíz „kapcsolója"
   mögött nem volt semmi — csak egy `classList.toggle`. Most jelző: ugyanazt az
   állapotot mutatja, de `<span>`, nem `<button>`, kisebb és halványabb, és
   nem visz rá kurzort. Aki ránéz, látja, hogy ez tájékoztat, nem kapcsol. */
.kapcs.allapot{display:inline-block;cursor:default;width:30px;height:17px;opacity:.72}
.kapcs.allapot::after{width:13px;height:13px}
.kapcs.allapot.be::after{transform:translateX(13px)}

.szabaly{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--keret);align-items:start}
.szabaly:last-child{border-bottom:0}
.szabaly b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.szabaly p{margin:0;font-size:12px;color:var(--halvany);line-height:1.45}
.szabaly .m{margin-top:5px;font-size:11.5px;color:var(--halvanyabb);
  padding-left:9px;border-left:2px solid var(--keret-2)}

.mezosor{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:9px 0;
  align-items:center;border-bottom:1px solid var(--keret)}
.mezosor:last-child{border-bottom:0}
.mezosor > i{font-style:normal;font-size:12px;color:var(--halvany)}
.mezosor .ertekdoboz{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600}
.mezosor code{padding:3px 8px;border-radius:7px;background:var(--papir);
  border:1px solid var(--keret);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:500}

.emberek{display:flex;flex-direction:column}
.ember{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--keret)}
.ember:last-child{border-bottom:0}
.ember .kor{width:34px;height:34px;border-radius:50%;background:var(--kek-50);
  color:var(--kek-900);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.ember .nev{flex:1;min-width:0}
.ember .nev b{display:block;font-size:13px;font-weight:600}
.ember .nev span{font-size:11.5px;color:var(--halvany)}
.ember .szerep{padding:4px 10px;border-radius:999px;background:var(--papir-2);
  font-size:11.5px;font-weight:600;color:var(--halvany);flex:none}
.ember .mikor{font-size:11.5px;color:var(--halvanyabb);width:66px;text-align:right;flex:none}

/* ══════════════════════════════════════════════════════════════════════
   8. SZŰK ÉS ALACSONY KÉPERNYŐ
   ══════════════════════════════════════════════════════════════════════
   MÉRT szabály: előbb a legkevésbé fontos OSZLOP esik ki (EAN, fotószám),
   nem a betűméret — és sosem csonkul némán semmi.                        */
@container (max-width:1050px){
  .beall{grid-template-columns:186px 1fr}
}
@container (max-width:880px){
}
@media (max-height:900px){
  .ablakhatter{padding:20px}
}
@media (max-height:800px){
  .lap{padding-top:10px}
  .lapfej{margin-bottom:9px}
  .lapfej h1{font-size:19px}
  .tsor{padding:9px 14px}
  .kapcsolo{margin-bottom:9px}
  .osszegzo{padding:9px 14px;margin-bottom:9px}
  .bpanel{padding:15px 17px}
  .ablakhatter{padding:13px}
  .ablak{grid-template-rows:44px 1fr 54px;border-radius:15px}
  .dontosor .g{padding:8px 6px;font-size:12.5px}
  .oszlop{gap:5px}
  .b{padding:6px 10px}
  .pipak{gap:4px}
  .pipa{padding:4px 8px}
}
@media (max-height:730px){
  .lapfej p{display:none}
  .tsor{padding:8px 13px}
  .tkep{width:34px;height:34px}
  .ablakhatter{padding:8px}
  .ablak{grid-template-rows:40px 1fr 48px;border-radius:13px}
  .dontosor .g{padding:6px 5px;font-size:12px}
  .kepgombok .g{padding:5px 3px;font-size:11px}
  .oszlop{gap:4px}
  .b{padding:5px 9px}
  .b .alcimke{margin:5px 0 3px}
  .pipak{gap:3px}
  .pipa{padding:3px 7px}
  .tipus button{padding:5px 4px}
}

/* ══════════════════════════════════════════════════════════════════════
   FÉLRETEVÉS + MEGJEGYZÉS
   ══════════════════════════════════════════════════════════════════════
   Roland: „villámgyorsan beírni egy-két szót vagy egy mondatot, ami meg is
   jelenik a félretetteknél." Nem megerősítő ablak: a gomb FÖLÖTT nyílik egy
   mező, magától fókuszba kerül, Enter = kész.                             */
.dontosor{position:relative}
.felrepop{position:absolute;left:0;right:0;bottom:calc(100% + 11px);z-index:60;
  background:var(--lap);border:1px solid var(--keret);border-radius:14px;
  box-shadow:0 20px 46px rgba(19,26,44,.24);padding:12px 13px 11px;text-align:left;
  animation:felrebe .16s cubic-bezier(.2,.9,.3,1)}
@keyframes felrebe{from{transform:translateY(7px);opacity:0}}
.felrepop::after{content:"";position:absolute;left:32px;top:100%;
  border:7px solid transparent;border-top-color:var(--lap)}
.felrepop .ffej{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;
  font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;
  color:var(--halvanyabb)}
.felrepop .ffej em{font-style:normal;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:11px;opacity:.85}
.felrepop input{width:100%;padding:10px 12px;border:1.5px solid var(--keret-2);
  border-radius:10px;font:inherit;font-size:13.5px;background:var(--lap);
  color:var(--szoveg);outline:0;transition:border-color .13s,box-shadow .13s}
.felrepop input::placeholder{color:var(--halvanyabb);font-weight:400}
.felrepop input:focus{border-color:var(--kek);box-shadow:0 0 0 3px rgba(65,86,149,.14)}
.fmintak{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.fmintak button{padding:5px 10px;border-radius:999px;border:1px solid var(--keret);
  background:var(--papir);font-size:11.5px;font-weight:600;color:var(--halvany)}
.fmintak button:hover{border-color:var(--kek-600);color:var(--szoveg);background:var(--lap)}
.flab{display:flex;align-items:center;gap:8px;margin-top:11px}
.fsugo{margin-right:auto;font-size:10.5px;color:var(--halvanyabb)}
.fsugo kbd{display:inline-block;padding:0 4px;border-radius:4px;background:var(--papir-2);
  font:inherit;font-size:9.5px;font-weight:600;color:var(--halvany)}
/* A félretevés színe végig ugyanaz a borostyán, mint a Félretett jelvényé. */
.g.sarga{background:#C98A12;border-color:#C98A12;color:#fff}
.g.sarga:hover{background:#b17a0d;border-color:#b17a0d}

/* megjegyzés nélküli félretevés a listában */
.okszoveg.nincs{opacity:.55;font-style:italic}
/* Az ELAKADT sor oka piros: ez nem háttér-információ, hanem teendő. */
.okszoveg.baj{color:var(--piros)}
.osszegzo .tetel.baj b{color:var(--piros)}

@media (max-height:800px){
  .felrepop{padding:10px 12px 10px}
  .felrepop input{padding:8px 11px;font-size:13px}
  .fmintak{margin-top:7px}
  .flab{margin-top:9px}
}

/* A lábléc döntőgombjai: kompaktak, jobbra zárnak; a félretevés-mező és a
   súgóbuborékok innen FELFELÉ nyílnak (az alap .felrepop/.sugobuborek pont
   így áll), csak jobbra igazítjuk, hogy ne lógjanak ki az ablakból. */
.ablakalja .dontosor{position:relative;flex:none}
.ablakalja .dontosor .g{flex:none;padding:8px 16px}
.ablakalja .dontosor .g.fo{flex:none}
.ablakalja .felrepop{left:auto;right:0;width:340px}
.ablakalja .felrepop::after{left:auto;right:56px}


/* ── Törlés-ikon a lista soraiban (Roland, 2026-09-02) ─────────────────
   Halványan ül a sor végén, hoverre pirosodik — nem hívja fel magára a
   figyelmet, de mindig ott van. */
/* ⛔ MÉRT HIBA (Roland, 2026-09-02): az ikonok ELCSÚSZTAK, mert a nyíl csak
   egyes soroknál van ott — a kuka soronként más helyre került. A nyílnak
   ezért FIX SZÉLESSÉGŰ helye van, üresen is. A gomb PIROS (Roland kérése):
   a törlés nem semleges művelet, látszódjon annak. */
.tveg{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.tveg .tnyil{width:14px;text-align:center;flex:none;color:var(--halvanyabb)}
.feltveg{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.tkuka{width:28px;height:28px;border:0;border-radius:8px;background:transparent;
  color:#c12a30;display:grid;place-items:center;cursor:pointer;flex:none;
  opacity:.6;transition:opacity .14s, background .14s}
.tsor:hover .tkuka{opacity:1}
.tkuka:hover{background:rgba(193,42,48,.12)}
.tkuka svg{width:15px;height:15px}

/* ══ TÖRLÉS-ABLAK — a 2-es terv (Roland, 2026-09-02: „egy az egybe") ═══
   Piros fejléc, a termék bélyegképpel, két külön kapcsoló. */
.thatter{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(19,26,44,.42);backdrop-filter:blur(3px);animation:thatterbe .14s ease}
@keyframes thatterbe{from{opacity:0}}
.tablak{width:min(92vw,430px);background:var(--lap);border-radius:18px;
  box-shadow:var(--arny-3);overflow:hidden;animation:tablakbe .18s cubic-bezier(.2,.8,.3,1)}
@keyframes tablakbe{from{transform:translateY(8px) scale(.985);opacity:0}}
.tablak .tfej{background:var(--piros);color:#fff;padding:15px 20px;
  display:flex;gap:11px;align-items:center}
.tablak .tfej b{font-size:15.5px;font-weight:800;letter-spacing:-.1px}
/* ⛔ MÉRT OSZTÁLYNÉV-ÜTKÖZÉS (Roland fogta élesben, 2026-09-02: „ez a szürke…"):
   a `.tfej` KÉT külön dolgot jelent — a LISTA fejlécét és ennek az ABLAKNAK a
   fejlécét. A lista-fejléc `.tfej span{color:var(--halvanyabb)}` szabálya
   KÖZVETLENÜL a spanre írt, ezért legyőzte a `.tablak .tfej{color:#fff}`
   ÖRÖKÖLT fehérét (az öröklést minden közvetlen szabály veri, specificitástól
   függetlenül) — az ikon szürke lett a piros fejlécben. Ezért kap a `.tkor`
   KIMONDOTT színt, `.tablak .tfej .tkor` alakban (0,3,0 — a `.tfej span`
   (0,2,0) fölött), nem az öröklésre bízva. */
.tablak .tkor{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;flex:none}
.tablak .tfej .tkor{color:var(--piros-200)}
.tablak .tkor svg{width:18px;height:18px}
.ttorzs{padding:18px 20px 20px}
.ttermek{display:flex;gap:11px;align-items:center;margin-bottom:14px}
.ttermek .tkep{width:46px;height:46px;border-radius:10px;background:var(--papir-2);
  flex:none;object-fit:cover}
.ttermek b{font-size:13.5px;display:block;line-height:1.3}
.ttermek small{font-size:11.5px;color:var(--halvanyabb)}
.tvalasztok{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tvalto{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:11px 13px;border:1px solid var(--keret);border-radius:11px;cursor:pointer;
  background:var(--lap);font:inherit;color:inherit;text-align:left}
.tvalto.be{border-color:var(--piros-200);background:var(--piros-50)}
.tvalto b{font-size:13px;display:block}
.tvalto > span > span{font-size:11.5px;color:var(--halvany)}
.tkapcs{width:38px;height:22px;border-radius:99px;background:#cfd5e3;position:relative;
  flex:none;transition:background .15s}
.tkapcs::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.tvalto.be .tkapcs{background:var(--piros)}
.tvalto.be .tkapcs::after{left:18px}
.tgombok{display:flex;gap:9px;justify-content:flex-end}
.tgombok .g{padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:700;
  border:0;cursor:pointer;font-family:inherit}
.tgombok .megse{background:var(--papir-2);color:var(--szoveg)}
.tgombok .torolgomb{background:var(--piros);color:#fff;box-shadow:0 4px 14px rgba(179,38,30,.3)}
.tgombok .torolgomb:hover{filter:brightness(1.08)}
.tgombok .torolgomb:disabled{background:var(--keret-2);color:var(--halvanyabb);
  box-shadow:none;cursor:not-allowed}


/* ── 10) FÉLRETÉVE csík az állapot-doboz fölött (Roland, 2026-09-04) ──
   Sárga, egy sor: mi az ok / megjegyzés, ki és mikor. Csak ha a legutóbbi
   döntés félretétel volt. */
.felrecsik{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:9px 12px;
  border-radius:12px;background:#FFF4DE;border:1px solid #F2D9A8;font-size:12.5px;
  color:#7A4B00;min-width:0}
.felrecsik i{flex:none;width:8px;height:8px;border-radius:50%;background:#E0A400}
.felrecsik b{flex:none;font-weight:700}
.felrecsik span{flex:1;min-width:0;overflow-wrap:anywhere}
.felrecsik em{flex:none;font-style:normal;font-size:11px;color:#A8763A}

/* ── 9) A képgombok: a Fő kép KIEMELVE, a Törlés PIROS (Roland, 2026-09-04)
   „emeljük ki egy kicsit, nem kell túlságosan… a törlés gombot rakjuk be
   valamilyen pirosra, ott se kell túl erős." */
.kepgombok .g.fokepgomb{border-color:var(--kek);color:var(--kek-800);font-weight:700;
  background:#EEF2FB}
.kepgombok .g.torolgomb{border-color:#EAB3AD;color:#B03A2E;background:#FFF5F4;
  display:inline-flex;align-items:center;justify-content:center;gap:5px}
.kepgombok .g.torolgomb svg{width:13px;height:13px;flex:none}
.kepgombok .g.torolgomb:hover{background:#FDE7E4}

/* 12) a sandbox-jelzés a „Kint a boltban" mellett — amíg a próba-boltba megy */
.sandboxjel{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:#FFF0C2;color:#8A5A00;border:1px solid #F0D48A;vertical-align:middle}

/* 13) VÁZ — az első betöltés alatt (Roland, 2026-09-12).
   „újratöltöm az oldalt, és konkrétan eltűnik az Importált menüpont, az egész
    rész is, hogy nincs termék, és így újratölt az egész."
   A lap szinkronban rajzol, az adat 0,4 mp múlva jön. Addig NEM írjuk ki,
   hogy „Nincs ilyen termék" — ez a váz áll a helyén: ugyanaz a fejléc,
   ugyanaz a sormagasság, halvány csíkokkal. Semmit nem állít, tehát nincs
   mit visszavonni, és a lista nem ugrik el a szem elől, amikor megjön. */
.tabla.vaz .vazsor{pointer-events:none}
.tabla.vaz .vazkep{width:38px;height:38px;border-radius:8px;
  background:var(--papir-2);border:1px solid var(--keret)}
.tabla.vaz .vazcsik{height:9px;border-radius:999px;background:var(--papir-2)}
.tabla.vaz .vazcsik.sz1{width:62%}
.tabla.vaz .vazcsik.sz2{width:78%}
.tabla.vaz .vazcsik.sz3{width:46%}
/* Halk lüktetés: jelzi, hogy dolgozik, de nem villog. Aki kikapcsolta az
   animációkat, annak áll — a váz akkor is olvasható. */
@keyframes vazlukteto{0%,100%{opacity:.55}50%{opacity:.9}}
.tabla.vaz .vazkep,
.tabla.vaz .vazcsik{animation:vazlukteto 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .tabla.vaz .vazkep,
  .tabla.vaz .vazcsik{animation:none;opacity:.6}
}
@media (max-width: 1180px){ .tabla.vaz .vazkep{width:34px;height:34px} }

/* ⭐ 2026-10-17 HOSSZÚ NÉV MODUL — „Ki adja a terméknevet?” (három valódi kapcsológomb, a szerveren tárolva) */
.nevmod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 6px}
.nevmod-gomb{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border-radius:10px;
  border:1px solid var(--kek-100);background:var(--lap);color:inherit;font:inherit;cursor:pointer}
.nevmod-gomb b{font-weight:600}
.nevmod-gomb span{font-size:13px;opacity:.75;line-height:1.35}
.nevmod-gomb:hover{border-color:var(--kek-600)}
.nevmod-gomb.be{border-color:var(--kek);background:var(--kek-50);box-shadow:inset 0 0 0 1px var(--kek)}
.nevmod-gomb:focus-visible{outline:2px solid var(--kek);outline-offset:2px}
@media (max-width:760px){.nevmod{grid-template-columns:1fr}}