* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* --- Betűméret és sűrűség -------------------------------------------------
 *
 * A felhasználó elemenként külön betűméretet, színt és félkövéret kért -- az
 * nagyjából hatvan beállítás lett volna. Ehelyett KÉT csúszka, ami ugyanazt a
 * célt éri el: a lista legyen olvasható, és férjen ki belőle sok sor.
 *
 * Miért nem `zoom` vagy `transform: scale`: azok a szegélyeket és az árnyékokat
 * is nagyítják, és a felugró ablakok pozíciója elcsúszik tőlük. Így viszont
 * csak a betű és a térköz változik, a szerkezet nem mozdul.
 *
 * A `html` elemre kerülő `data-meret` és `data-suruseg` vezérli. A választás
 * a böngészőben marad (localStorage), gépenként külön -- a boltban nagyobb
 * betű kellhet, mint otthon.
 */
:root {
  --betu-alap:    14px;   /* táblázat, gombok, mezők */
  --betu-kicsi:   13px;   /* eszköztár, jelmagyarázat */
  --betu-fejlec:  12px;   /* táblázat-fejléc */
  --lista-terkoz: 10px 12px;
}
:root[data-meret="kicsi"] {
  --betu-alap: 13px; --betu-kicsi: 12px; --betu-fejlec: 11px;
}
:root[data-meret="nagy"] {
  --betu-alap: 16px; --betu-kicsi: 15px; --betu-fejlec: 13px;
}
:root[data-meret="nagyon-nagy"] {
  --betu-alap: 18px; --betu-kicsi: 17px; --betu-fejlec: 14px;
}

:root[data-suruseg="kompakt"] { --lista-terkoz: 5px 10px; }
:root[data-suruseg="laza"]    { --lista-terkoz: 15px 14px; }

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-muted: #f4f5f7;
  --border: #dde1e6;
  --text: #1c2128;
  --text-muted: #6b7280;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;
  --accent-bg: #eff6ff;
  --accent-border: #bfdbfe;
  --radius: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --surface: #1e2126;
    --surface-muted: #262a31;
    --border: #383d45;
    --text: #e8eaed;
    --text-muted: #9aa1ac;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --danger: #f87171;
    --success: #4ade80;
    --accent-bg: #1e293b;
    --accent-border: #334155;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #14161a;
  --surface: #1e2126;
  --surface-muted: #262a31;
  --border: #383d45;
  --text: #e8eaed;
  --text-muted: #9aa1ac;
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --danger: #f87171;
  --success: #4ade80;
  --accent-bg: #1e293b;
  --accent-border: #334155;
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

dialog {
  background: var(--surface);
  color: var(--text);
}

input, select, textarea {
  background: var(--surface);
  color: var(--text);
}

/* A fejléc két sorból áll: fent a navigáció, alatta a terméklista keresője és
   szűrői. Korábban mind a tizenhárom gomb egy sorban volt, és tördelt. */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar h1 {
  font-size: 19px;
  margin: 0;
  white-space: nowrap;
}

/* Szövegszerű gomb egy címke mellett („✏️ lista szerkesztése"): nem akar
   főszereplő lenni, de legyen megtalálható. */
.link-gomb {
  margin-left: 8px; padding: 0; border: none; background: none;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--primary); cursor: pointer;
}
.link-gomb:hover { text-decoration: underline; }

/* A termékkörök szerkesztője: soronként egy név, mellette hány beszállító
   használja — ebből látszik, mit érint egy törlés. */
.tkor-lista { display: flex; flex-direction: column; gap: 6px; }
.tkor-sor { display: flex; align-items: center; gap: 10px; }
.tkor-sor .tkor-nev {
  flex: 1; min-width: 0; padding: 7px 10px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 6px;
}
.tkor-sor .tkor-db { flex: none; min-width: 7.5em; margin: 0; text-align: right; }

/* A belépőkép előnézete a cégadatok ablakában. Ugyanaz a sötét fátyol van
   rajta, mint a belépőn — így azt látod, ami ott is látszani fog. */
.cegb-hatter { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cegb-hatter-kep {
  width: 180px; aspect-ratio: 16 / 10; flex: none;
  border-radius: 8px; border: 1px solid var(--border);
  background-color: #0a0c10; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 999px rgba(10, 12, 16, .45);
}
.cegb-hatter-gombok { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; min-width: 12rem; }
.cegb-hatter-gombok label.btn { cursor: pointer; }

/* Az ügyfélportál alján: melyik programmal dolgozik a bolt. Apró és halvány —
   a portál a vevő arculata, ez csak aláírás. */
.keszult-jel {
  text-align: center;
  padding: 28px 16px 22px;
  font-size: 11.5px;
}
.keszult-jel a { color: var(--text-muted); text-decoration: none; opacity: .75; }
.keszult-jel a:hover { opacity: 1; text-decoration: underline; }

/* A cég neve mellett kicsiben a szoftveré. Halvány és kicsi: a fejlécben a
   CÉG a főszereplő, a program csak aláír. */
.szoftver-jel {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  vertical-align: 2px;
}
/* Keskenyebb képernyőn a fejléc minden képpontért megküzd (a raktárnév és a
   hamburger mellett a cím hármaspontot kap) — itt a jel az első, ami megy. */
@media (max-width: 900px) {
  .szoftver-jel { display: none; }
}

/* A profil és az "+ Új termék" a sor jobb szélére kerül. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- Lenyíló menü --- */

.menu { position: relative; }

.menu-btn::after {
  content: ' ▾';
  font-size: 11px;
  opacity: 0.7;
}

.menu.open > .menu-btn {
  background: var(--surface-muted);
  border-color: var(--text-muted);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* A jobb szélső menü befelé nyílik, hogy ne lógjon ki a képernyőről. */
.menu-end .menu-panel { left: auto; right: 0; }

.menu-panel[hidden] { display: none; }

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.menu-item:hover { background: var(--surface-muted); }

/* A menüben lévő linkek ugyanúgy nézzenek ki, mint a gombok: a felhasználót
   nem érdekli, hogy az egyik <button>, a másik <a>. Az aláhúzást és a link-
   színt le kell venni, különben kilóg a sorból. */
.menu-link { text-decoration: none; color: var(--text); box-sizing: border-box; }
.menu-link:hover { text-decoration: none; }

.menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.menu-info {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.current-user-indicator {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- A terméklista keresője és szűrői --- */

.topbar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Csak a keresőmezőre: a szűrősorban a Szűrők panel is benne van, abban
   oszlopos elrendezés van, és ott a 260 képpont a MAGASSÁG lenne. */
.topbar-filters > .kereso-doboz > input {
  flex: 1 1 260px;
  max-width: 420px;
}

/* A közvetlen gyerekekre: a panelbe zárt mezőknek saját méretük van. */
.topbar-filters > input,
.topbar-filters > select,
.topbar-filters > .kereso-doboz > input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
}

/* --- Hamburger: csak keskeny képernyőn --- */

.nav-toggle { display: none; }

/* A Menü gombja és a menü közös doboza. Nagy képernyőn a doboz nem létezik
   elrendezés szempontjából (display: contents), tehát a navigáció ugyanúgy
   folyik a fejlécben, mint eddig. Telefonon viszont ez a doboz a horgony:
   a lenyíló panel EHHEZ igazodik, nem a teljes fejléchez. */
.nav-doboz { display: contents; }

@media (max-width: 900px) {
  /* A lebegő panelek ehhez igazodnak. */
  .topbar { padding: 12px 14px; position: relative; }
  .nav-toggle { display: inline-block; }
  .mainnav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  /* A hamburger tartalma lebegő panel, a Menü gomb alatt JOBBRA igazítva --
     nem pedig teljes szélességű sáv, ami lejjebb tolja az egész oldalt. */
  .nav-doboz {
    display: block;
    position: relative;
    order: 3;
    margin-left: auto;
    flex: none;
  }
  .mainnav.open {
    display: flex;
    position: absolute;
    /* A GOMB alatt, nem a fejléc alján. */
    top: calc(100% + 4px);
    right: 0;
    z-index: 70;
    width: min(290px, calc(100vw - 28px));
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  /* A hamburgeren BELÜLI almenük (Partnerek, Üzlet, Eszközök) viszont
     maradjanak a folyamban: egy panelen belül a lebegő panel eltakarná
     magát a listát. */
  .mainnav .menu-panel {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 12px;
    min-width: 0;
  }

  .topbar-right { margin-left: 0; }
  .topbar-filters > .kereso-doboz > input { max-width: none; }
}

#search { min-width: 260px; }

main { padding: 24px; }

.product-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.product-table th,
.product-table td {
  padding: var(--lista-terkoz);
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: var(--betu-alap);
}

.product-table th {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--betu-fejlec);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.product-table tbody tr:hover { background: var(--surface-muted); cursor: pointer; }

.product-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.product-table th.sortable:hover { color: var(--text); }

/* Termékmásolat (VF14): a sáv a termékablak tetején, a méretgombok. */
.masolat-sav {
  border: 1px solid var(--primary, #2563eb); border-radius: var(--radius);
  background: var(--surface-muted); padding: 10px 14px; margin-bottom: 14px;
}
.masolat-cim { margin: 0 0 4px; font-size: 15px; }
.masolat-meretek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.masolat-meret-cimke { font-size: 13px; color: var(--text-muted); margin-right: 2px; }
.masolat-meret {
  min-width: 40px; padding: 5px 10px; border-radius: 999px; cursor: pointer; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.masolat-meret:hover { border-color: var(--primary, #2563eb); }
.masolat-meret.aktiv { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.masolat-pipa { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.masolat-pipa input { width: auto; margin: 0; }

/* Partner-adatlap: eltérő postázási cím, kapcsolattartók. */
.partner-blokk { border-top: 1px solid var(--border); padding-top: 12px; }
.partner-blokk .pipa-sor { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.partner-blokk .pipa-sor input { width: auto; margin: 0; }
.partner-al { margin-top: 10px; }
.partner-blokk .btn, .partner-al .btn { align-self: flex-start; }
.kapcsolattartok { display: grid; gap: 8px; margin-bottom: 8px; }
.kt-sor {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr) auto;
}
.kt-sor input { min-width: 0; width: 100%; box-sizing: border-box; }
.kapcsolattartok:empty::before { content: 'Még nincs kapcsolattartó.'; color: var(--text-muted); font-size: 13px; }
@media (max-width: 760px) {
  .kt-sor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
  .kt-sor [data-kt-torol] { justify-self: end; }
}

/* Kétlépcsős belépés a Profilban. */
.kl-allapot { margin: 0 0 10px; font-weight: 600; }
.kl-allapot.be { color: var(--success); }
.kl-beallit { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.kl-qr { width: 180px; height: 180px; flex: none; background: #fff; padding: 6px; border-radius: 8px; }
.kl-qr svg { width: 100%; height: 100%; display: block; }
.kl-lepesek { margin: 0; padding-left: 20px; flex: 1 1 240px; line-height: 1.55; }
.kl-titok { font-size: 13px; letter-spacing: 0.06em; word-break: break-all; }
.kl-tartalek { border: 1px solid var(--warning, #d97706); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; }
.kl-kodok {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 16px;
  font-size: 15px; letter-spacing: 0.04em; margin: 0 0 10px; white-space: normal;
}
.kl-gombok { display: flex; gap: 8px; flex-wrap: wrap; }

/* A név alatti kis cikkszám csak telefonon látszik: ott a cikkszám-oszlop
   alapból rejtve van, hogy a mennyiség és az ár görgetés nélkül kiférjen. */
.product-table .nev-cikkszam { display: none; }
@media (max-width: 640px) {
  .product-table th, .product-table td { padding: 8px 6px; }
  .product-table th { letter-spacing: 0; }
  .product-table .nev-cikkszam { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
}
.sort-indicator { display: inline-block; width: 10px; margin-left: 3px; opacity: 0.35; }
.sort-indicator.active { opacity: 1; color: var(--primary); }

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.list-toolbar-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* A terméklista fölötti sor: a sáv (darabszám balra, vezérlők jobbra), a lapozó
   és az oszlopok választója. */
.lista-fejsor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lista-fejsor .list-toolbar { flex: 1 1 auto; margin-bottom: 0; }
.lista-fejsor .pagination-fent { margin: 0; padding: 0; }
.oszlop-valaszto { position: relative; }
.oszlop-valaszto > summary { list-style: none; cursor: pointer; }
.oszlop-valaszto > summary::-webkit-details-marker { display: none; }
.oszlop-valaszto-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: grid; gap: 6px; font-size: 13.5px;
}
.oszlop-valaszto-panel label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.oszlop-valaszto-panel .hint { margin: 0 0 4px; }

/* A Google-keresés gombja: piros „G” (Tamás kérése). */
.btn-icon.btn-google { color: #e53935; font-weight: 800; font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.raktar-osszeg-fent .kijelolt-osszeg { color: var(--primary); }

/* Címkenyomtatás: az előnézet a címke valódi méretében (mm), fehér alapon,
   mint a papíron — sötét témában is. */
#cimke-dialog { width: min(640px, 96vw); }
/* A csomagon kívüli rész (K19): a menüből és a gombok közül is eltűnik. */
.modul-rejtve { display: none !important; }

/* Tömeges szerkesztés */
#tomeges-dialog { width: min(560px, 96vw); }
.tomeges-cim { margin: 0 0 12px; font-weight: 600; }
.tsz-beszallito-sor { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.tsz-racs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin-top: 10px; }
.tsz-racs select, .tsz-beszallito-sor select { width: 100%; }
.tomeges-uzenet:empty { display: none; }
.tomeges-hiba { color: var(--danger); }
@media (max-width: 520px) { .tsz-racs { grid-template-columns: 1fr; } }
/* Újrarendelés a tömeges szerkesztésben: a mód, alatta a két szám egy sorban. */
.tsz-ujrarendeles { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tsz-ujrarendeles select { width: 100%; }
.tsz-ujra-szamok { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.tsz-ujra-szam { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.tsz-ujra-szam input { width: 90px; font-variant-numeric: tabular-nums; }
/* A terméklista „Legalább” oszlopa: ami a minimum alatt van, az a 🧺 listán van. */
.min-alatt { color: var(--danger); font-weight: 600; }
.cimke-elonezet-doboz { display: flex; justify-content: center; padding: 14px; background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 10px; overflow: auto; }
#cimke-elonezet .cimke { background: #fff; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
/* A DYMO saját előnézete (PNG, fehér címke árnyékkal) — sötét témában is fehér alapon. */
#cimke-elonezet .cimke-dymo-kep { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 6px; }
.cimke-dymo { margin: 0 0 10px; }
.cimke-dymo:empty { display: none; }
.cimke-dymo-kesz { color: var(--success); }
.cimke-dymo-hiba { color: var(--danger); }
.cimke-sorok-fej { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.cimke-sorok-fej strong { flex: 1; }
.cimke-sorok { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.cimke-sor { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.cimke-sor input { width: 70px; }
.cimke-sor .hint { font-size: 12px; }
.list-toolbar select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.view-mode-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-mode-toggle button {
  border: none;
  background: var(--surface);
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
}
.view-mode-toggle button.active { background: var(--primary); color: #fff; }
.view-mode-toggle button + button { border-left: 1px solid var(--border); }

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.pagination-bar[hidden] { display: none; }
.pagination-bar button:disabled { opacity: 0.4; cursor: not-allowed; }

.scroll-sentinel { height: 1px; }
.scroll-status {
  text-align: center;
  padding: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.scroll-status[hidden] { display: none; }

.trash-section { margin-bottom: 24px; }
.trash-section h3 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.trash-count { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.trash-list { display: flex; flex-direction: column; gap: 6px; }
.trash-empty-hint { font-size: 13px; color: var(--text-muted); padding: 4px 0; }
.trash-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.trash-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trash-item-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-item-meta { color: var(--text-muted); font-size: 12px; }
.trash-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

.row-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-muted);
  display: block;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-yes { background: #dcfce7; color: #15803d; }
.badge-no { background: #fee2e2; color: #b91c1c; }

.linked-document-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.linked-document-row:last-child { border-bottom: none; }
.linked-document-row a { color: var(--primary); text-decoration: none; }
.linked-document-row a:hover { text-decoration: underline; }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}

.btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* A letiltott gomb LÁTSZIK, csak nem megy — az eltűnésnél ez jobb, mert a
   fölé húzva megmondja, mi hiányzik hozzá. */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--surface-muted); }

.btn-small { padding: 6px 10px; font-size: 13px; }

.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--surface-muted); }

.bulk-bar[hidden] { display: none; }
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.bulk-bar span { font-size: 14px; font-weight: 600; color: var(--text); }
.row-select, .select-all-checkbox { width: 17px; height: 17px; cursor: pointer; }

.btn-icon {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--surface-muted); color: var(--text); }

dialog#product-dialog {
  width: min(720px, 92vw);
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

dialog#product-dialog[open] {
  display: flex;
  flex-direction: column;
}

/* MINDEN ablak, amelyiknek gombsora van: a fejléc és a gombsor a helyén marad,
   csak a közepe görög.

   A fejléc, a törzs és a gombsor stílusa eleve erre készült (a gombsor nem
   zsugorodik, a törzs görget) — de ez az egy szabály csak a termék-ablakon
   volt meg. Az összes többi EGYBEN görgetett, és ha hosszabb volt a
   képernyőnél, a Mentés gomb lecsúszott a képernyő alja alá. Megmérve egy
   1366×768-as laptopon: 24 gombsoros ablakból 8-nál, üres állapotban is —
   köztük a vevő, a beszállító, a rendelés és a felhasználó űrlapja. Így
   veszett el egy mentés is: az ablak kitöltve megnyílt, a gomb nem látszott,
   és az ablak bezárult mentés nélkül.

   Az űrlapba csomagolt ablakoknál (a mentés így Enterre is megy) az űrlapnak
   is oszlopnak kell lennie, különben a törzs nem tud görögni. */
dialog[open]:has(.dialog-footer) {
  display: flex;
  flex-direction: column;
}
dialog[open]:has(.dialog-footer) > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#product-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

dialog#product-dialog::backdrop {
  background: rgba(15, 20, 30, 0.5);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dialog-header h2 { margin: 0; font-size: 18px; }

.dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.field input[type=text],
.field input[type=number],
.field input[type=url] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 16px;
  width: 100%;
  min-width: 0;
}

.field-image { grid-column: span 2; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.field-image label { min-width: 40px; }

.field-description { grid-column: span 2; }
.termek-kereso-gombok { flex-wrap: wrap; }
#beszallito-kereso-dialog { width: min(460px, 94vw); }
.field-description textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  width: 100%;
  min-width: 0;
}

.image-preview-wrap {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.image-preview { width: 100%; height: 100%; object-fit: cover; }
.image-placeholder { font-size: 11px; color: var(--text-muted); text-align: center; padding: 4px; }

.field-toggle { flex-direction: row; align-items: center; }
.field-toggle label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }

.barcode-input-row { display: flex; gap: 6px; flex-wrap: wrap; }
.barcode-input-row input { flex: 1; min-width: 120px; }
.barcode-input-row .btn { flex-shrink: 0; white-space: nowrap; }

.input-with-mic { display: flex; gap: 6px; align-items: flex-start; }
.input-with-mic input,
.input-with-mic textarea { flex: 1; min-width: 0; }
/* A mikrofon gomb kinézete korábban a .input-with-mic-hez volt kötve. Az
   asszisztens beviteli sora (.asz-bevitel) viszont nem ilyen, ezért ott a
   gombnak se kerete, se „hallgatlak" jelzése nem volt. A kinézet a gombhoz
   tartozik, nem ahhoz, hogy éppen milyen sorban áll. */
.btn-mic { flex-shrink: 0; font-size: 18px; border: 1px solid var(--border); }
.btn-mic.listening { background: #fee2e2; color: var(--danger); animation: mic-pulse 1s infinite; }

/* Ha a böngésző nem tud hangfelismerést, a gomb látszik, de nem megy. Ez
   jobb, mint a néma eltűnés: onnan nem derül ki, hogy a böngésző az oka és
   nem a program hiányos. */
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon:disabled:hover { background: transparent; color: var(--text-muted); }

@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

dialog.scanner-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: #000;
}

dialog.scanner-overlay[open] {
  display: flex;
  flex-direction: column;
}

.scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.scanner-header .btn-icon { color: #fff; font-size: 20px; }
.scanner-header .btn-icon:hover { background: rgba(255,255,255,0.15); }

#scanner-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#scanner-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-status {
  color: #fff;
  text-align: center;
  padding: 16px;
  margin: 0;
  font-size: 14px;
  background: rgba(0,0,0,0.4);
}

.offers-section { border-top: 1px solid var(--border); padding-top: 16px; }
.offers-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.offers-header h3 { margin: 0; font-size: 15px; }
.hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 12px; }

.status-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.status-chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.status-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.menu-dropdown { position: relative; display: inline-block; }
.menu-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 50;
  min-width: 170px;
  overflow: hidden;
}
.menu-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}
.menu-dropdown-item:hover { background: var(--surface-muted); }

/* A szín azt mondja meg, HOL VAN AZ ÁRU — nem azt, hogy jó-e a hír.
   Szürke: még nincs nálad. Zöld: nálad van, benne a készletben.
   Kék: kiment tőled, levonva. Piros: visszamondva. */
.badge-status-leadva { background: #e5e7eb; color: #374151; }
.badge-status-megrendelve { background: #e5e7eb; color: #374151; }

.badge-status-megerkezett { background: #dcfce7; color: #15803d; }
.badge-status-osszekeszites { background: #d1fae5; color: #047857; }
.badge-status-atveheto { background: #fef3c7; color: #92400e; }
.badge-status-uton { background: #fed7aa; color: #9a3412; }

.badge-status-atvette { background: #dbeafe; color: #1d4ed8; }
.badge-status-kiszallitva { background: #dbeafe; color: #1d4ed8; }
.badge-status-visszamondva { background: #fee2e2; color: #b91c1c; }

/* A listában álló állapotválasztó ugyanazt a színt viseli, mint a címke volt:
   egy pillantással látszik, hol van az áru. Legördülőnek néz ki, mert az. */
.allapot-valaszto {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 170px;
}
.allapot-valaszto:disabled { opacity: 0.5; cursor: wait; }

.badge-return-bejelentve { background: #fee2e2; color: #b91c1c; }
.badge-return-beerkezett { background: #fef3c7; color: #92400e; }
.badge-return-feldolgozas_alatt { background: #dbeafe; color: #1d4ed8; }
.badge-return-lezarva { background: #dcfce7; color: #15803d; }

.badge-reqtype-erdeklodes { background: #e5e7eb; color: #374151; }
.badge-reqtype-arajanlatkeres { background: #dbeafe; color: #1d4ed8; }

.badge-reqstatus-uj { background: #fef3c7; color: #92400e; }
.badge-reqstatus-elfogadva { background: #dcfce7; color: #15803d; }
.badge-reqstatus-elutasitva { background: #fee2e2; color: #b91c1c; }

/* Széles táblázat saját magán belül görögjön, ne az egész oldal. */
.table-scroll { overflow-x: auto; }

.badge-quality-problemas { background: #fee2e2; color: #b91c1c; }
.badge-quality-alap { background: #e5e7eb; color: #374151; }
.badge-quality-jo { background: #dcfce7; color: #15803d; }
.badge-quality-kimondottan_jo { background: #bbf7d0; color: #14532d; }
.badge-quality-ipari { background: #dbeafe; color: #1d4ed8; }

.badge-rating-problemas { background: #fee2e2; color: #b91c1c; }
.badge-rating-megfelelo { background: #e5e7eb; color: #374151; }
.badge-rating-jo { background: #dbeafe; color: #1d4ed8; }
.badge-rating-kivalo { background: #dcfce7; color: #15803d; }

.badge-price-olcso { background: #dcfce7; color: #15803d; }
.badge-price-kozepes { background: #e5e7eb; color: #374151; }
.badge-price-draga { background: #fee2e2; color: #b91c1c; }

.badge-category-termekleiras { background: #dbeafe; color: #1d4ed8; }
.badge-category-tanusitvany { background: #dcfce7; color: #15803d; }
.badge-category-fontos_irat { background: #fee2e2; color: #b91c1c; }
.badge-category-kep { background: #fef3c7; color: #92400e; }
.badge-category-egyeb { background: #e5e7eb; color: #374151; }

.badge-tier-alapvasarlo { background: #e5e7eb; color: #374151; }
.badge-tier-visszajaro { background: #dbeafe; color: #1d4ed8; }
.badge-tier-torzsvasarlo { background: #dcfce7; color: #15803d; }
.badge-tier-kiemelt { background: #fef3c7; color: #92400e; }

.badge-role-admin { background: #fee2e2; color: #b91c1c; }
.badge-role-munkatars { background: #dbeafe; color: #1d4ed8; }
.badge-role-ugyfel { background: #dcfce7; color: #15803d; }

.offer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative;
}

.offer-row-main { display: flex; gap: 10px; flex: 1; min-width: 0; }

.offer-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-muted);
  flex-shrink: 0;
}

.offer-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.offer-fields input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 16px;
  width: 100%;
  min-width: 0;
}
.offer-fields-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.85fr 0.85fr; gap: 6px; }
.offer-mezo { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.offer-mezo-cim { font-size: 11px; color: var(--text-muted); line-height: 1.2; }

.offer-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.offer-primary { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.offer-status {
  position: absolute;
  bottom: 4px;
  right: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.form-error {
  color: var(--danger);
  font-size: 13px;
  margin-right: auto;
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .field-image { grid-column: span 1; }
  /* Enélkül a keskeny űrlap NEM egyoszlopos. A `span 2` a leíró mezőkön egy
     MÁSODIK, kéretlen oszlopot húz maga után (a rács csak egyet hirdet, a
     böngésző a hiányzót magától pótolja) -- és onnantól minden mező abba a
     két, egyenlőtlen oszlopba rendeződik. Telefonon megmérve: nyolc mező állt
     ott, ahol egynek sem kellett volna. A képre ez a sor már megvolt; a
     leírásokra kimaradt. */
  .field-description { grid-column: span 1; }
  .offer-fields-grid { grid-template-columns: 1fr; }

  dialog#product-dialog {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
}

/* A kártyák 200 képpontnál kilencesével fértek egy sorba: a képernyő tele
   volt, de semmi nem volt olvasható. 260-nál öt-hat jön ki, és a terméknév
   is elfér. */
.portal-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

/* Listanézet: 1 896 terméknek NINCS képe. Azoknál a rács csak levegőt mutat,
   a lista viszont ugyanannyi helyen háromszor annyi terméket. */
.portal-product-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.portal-product-list .portal-product-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}
.portal-product-list .portal-product-card img {
  width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
}
.portal-product-list .ppc-name { flex: 1; min-width: 0; }
.portal-product-list .ppc-desc { display: none; }
.portal-product-list .ppc-price { white-space: nowrap; }
.portal-product-list label { margin-top: 0 !important; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 4px;
}
.portal-product-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-product-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--bg);
  border-radius: 4px;
}
.portal-product-card .ppc-name { font-weight: 600; font-size: 14px; }
.portal-product-card .ppc-price { color: var(--primary); font-weight: 600; }
.ppc-listaar { color: var(--text-muted); font-weight: 400; font-size: .85em; margin-left: 4px; }
.portal-product-card .ppc-desc {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 32px;
}

/* A kártyák EGYFORMA magasak legyenek, különben a rács szaggatott lesz.
   A 1 935 termékből 1 896-nak nincs képe: kép nélkül a kártya 120 képponttal
   alacsonyabb volt, és soronként keveredett a magas meg az alacsony. Ezért a
   képnek akkor is van helye, ha nincs kép -- csak egy jel áll benne. */
.ppc-nokep {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--bg);
  border-radius: 4px;
  color: var(--text-muted);
  opacity: 0.5;
}
.portal-product-card .ppc-name {
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Listanézetben nincs szükség a kitöltésre: ott egy sor egy termék. */
.portal-product-list .ppc-nokep { height: 44px; width: 44px; font-size: 20px; flex-shrink: 0; }
.portal-product-list .ppc-name { min-height: 0; -webkit-line-clamp: 1; }

/* Telefonon a hét oszlopból kettő lesz, és a vezérlősor tördelhet. */
@media (max-width: 640px) {
  .portal-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .portal-product-card { padding: 8px; }
  .portal-product-card img,
  .ppc-nokep { height: 90px; }
  .portal-product-card .ppc-desc { display: none; }
  .list-toolbar { flex-wrap: wrap; gap: 8px; }
  .list-toolbar-controls { flex-wrap: wrap; gap: 8px; }
  .pager { flex-wrap: wrap; }
}

.wishlist-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.wishlist-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wishlist-card-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wishlist-item-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Lista-szűrősáv: kereső + szűrők a dialógusok listái fölött */
.list-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.list-filter-bar input[type="search"] { flex: 1 1 260px; min-width: 200px; }

.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* Beszállítói termékkörök: több is bejelölhető */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 14px;
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: normal;
  cursor: pointer;
}
.field-wide { grid-column: 1 / -1; }

/* Verziószám a fejlécben -- halvány, hogy ne vonja el a figyelmet */
.app-version {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Katalógus: keresőtalálatok és bevételezés */
.catalog-pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.catalog-receive-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.catalog-receive-existing {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
}
#catalog-dialog { max-width: 1200px; width: 95vw; }
#catalog-rows td { vertical-align: middle; }
.catalog-name { font-weight: 500; }
.catalog-noprice { color: var(--text-muted); font-style: italic; }

/* Tömeges műveletek csoportosítása a kijelölés-sávban */
.bulk-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}
.bulk-label { font-size: 12px; color: var(--text-muted); }

/* A listabeli bélyegkép kattintható -- teljes méretben megnyílik */
img.row-thumb { cursor: zoom-in; }
img.row-thumb:hover { outline: 2px solid var(--primary); outline-offset: 1px; }

.image-zoom-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 92vw;
  max-height: 92vh;
  overflow: visible;
}
.image-zoom-dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
.image-zoom-dialog img {
  display: block;
  max-width: 88vw;
  max-height: 80vh;
  border-radius: 8px;
  background: var(--surface);
}
.image-zoom-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  z-index: 1;
}
.image-zoom-caption {
  margin: 10px 0 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Statisztika */
#stats-dialog { max-width: 1000px; width: 94vw; }
.stat-section { margin-bottom: 26px; }
.stat-section h3 {
  margin: 0 0 4px;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
/* --- Bevételezés számláról --- */

#invoices-dialog, #invoice-detail-dialog { width: min(940px, 96vw); }

.inv-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line, var(--border));
}
.inv-toolbar label { font-size: 13px; color: var(--text-muted); }
.inv-toolbar input[type="date"] {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 14px;
}

.inv-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }

.inv-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 10rem 7rem auto;
  align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px; text-align: left;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--text); font-size: 14px; cursor: pointer;
}
.inv-row:hover { background: var(--surface-muted); }
.inv-date, .inv-amount { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 13px; }
.inv-amount { text-align: right; }
.inv-supplier { font-weight: 600; }
.inv-number { color: var(--text-muted); font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }

.inv-rows { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }

.inv-item {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface);
}
.inv-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-item-qty { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 13.5px; }
.inv-item-sub { margin-top: 5px; font-size: 12.5px; color: var(--text-muted); }
.inv-item-sub code { font-size: 12px; background: var(--surface-muted); padding: 1px 5px; border-radius: 3px; }

.inv-item-choice {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.inv-item-choice label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.inv-item-product {
  flex: 1 1 260px; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--text); font-size: 13px;
}
.inv-item-product:disabled { opacity: 0.45; }

.pill.skip { background: var(--surface-muted); color: var(--text-muted); }

@media (max-width: 720px) {
  .inv-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .inv-number { grid-column: 1 / -1; }
}

/* --- Jegyzettömb --- */

#notes-dialog { width: min(860px, 94vw); }

.notes-tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.note-tab {
  flex: 0 0 auto;
  max-width: 190px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-tab:hover { background: var(--surface); color: var(--text); }

.note-tab.active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  margin-bottom: -1px;
  padding-bottom: 9px;
}

.note-tab-new { font-size: 17px; line-height: 1; padding: 7px 12px; }

.notes-body { display: flex; flex-direction: column; gap: 10px; }

.note-title {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  background: var(--surface);
  color: var(--text);
}

.note-content {
  min-height: 46vh;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}

.notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.note-status { font-size: 12px; color: var(--text-muted); }

@media (max-width: 700px) {
  .note-content { min-height: 38vh; }
  .notes-tabs { padding: 0 12px; }
}

/* Visszajelzés az űrlapon: mi töltődött ki magától, és mi hiányzik hozzá. */
.field-hint {
  margin: 8px 0 0;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface-muted);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
}
.field-hint[hidden] { display: none; }

.stat-note { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }

/* Az elhagyott tételekről szóló magyarázat -- ne lehessen átsiklani fölötte. */
.stat-warn {
  color: var(--text);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  padding: 8px 12px;
  line-height: 1.5;
}
/* Karakterfelismeréssel olvasott számla. Nem hiba, hanem óvatosságra intés:
   a betűket jól olvassa, az árakat nem mindig. Ezért nem piros, hanem sárga --
   de átsiklani ne lehessen fölötte, mert innen készlet és beszerzési ár lesz. */
.ocr-figyelem {
  color: var(--text);
  background: color-mix(in srgb, #b45309 10%, transparent);
  border-left: 3px solid #b45309;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.ocr-figyelem strong { color: #b45309; }

/* --- Képernyő-bemutatkozás --------------------------------------------------
 *
 * A lap tetején ül, a dialógusok FÖLÖTT — de nem blokkol: mögötte lehet
 * dolgozni. Ezért nem `<dialog>`, hanem sima doboz magas z-indexszel.
 *
 * A 2147483646 azért kell, mert a modális `<dialog>` a böngésző saját
 * legfelső rétegében van, és egy hétköznapi z-index nem érne fölé.
 */
#bemutatkozas {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483646;
  width: min(46rem, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  font-size: 14px;
  line-height: 1.5;
}
#bemutatkozas .bem-szoveg { flex: 1; min-width: 15rem; }
#bemutatkozas .bem-szoveg strong { display: block; margin-bottom: 2px; }
#bemutatkozas .bem-szoveg span { color: var(--text-muted); }
#bemutatkozas .bem-gombok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bemutatkozas .btn { white-space: nowrap; }
#btn-bem-ertem { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Ablakon BELÜL: nem lebeg, hanem az ablak tetején ül. A modális dialógus
   fölé egy fixen pozicionált elem nem tud kerülni, ezért oda beköltözünk. */
#bemutatkozas.bem-beagyazott {
  position: static;
  transform: none;
  width: auto;
  margin: 0 0 12px;
  box-shadow: none;
}

@media (max-width: 32rem) {
  #bemutatkozas { top: 6px; padding: 10px 12px; }
  #bemutatkozas .bem-gombok { width: 100%; justify-content: flex-end; }
}

/* --- Tippek a mezők mellett -------------------------------------------------
 *
 * Halvány, amíg rá nem nézel: a mező a fontos, nem a kérdőjel. Nyitva viszont
 * kiszínesedik, hogy lássd, melyik magyarázat tartozik hozzá.
 */
.tipp-gomb {
  margin-left: 6px;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: help;
  opacity: .65;
}
.tipp-gomb:hover, .tipp-gomb:focus-visible { opacity: 1; color: var(--primary); }
.tipp-gomb.nyitva { opacity: 1; color: var(--primary); }

/* A magyarázat a teljes szélességet kapja, akárhány oszlopos az űrlap.
   Rácsban a `grid-column`, rugalmas dobozban a `flex-basis` viszi végig; a
   másik szabályt a böngésző mindkét esetben figyelmen kívül hagyja. */
.tipp-szoveg {
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: 100%;
  margin: 2px 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--primary);
}

/* --- Végigvezetés (első belépés) --------------------------------------------
 *
 * A sötétítést NEM egy külön réteg adja, hanem magának a kiemelő keretnek az
 * óriási box-shadow-ja. Így a „lyuk" mindig pontosan ott van, ahol a keret —
 * nem tud elcsúszni tőle, és nem kell se maszk, se négy külön takaró elem.
 */
#vezetes {
  position: fixed;
  inset: 0;
  z-index: 2147483645;   /* a bemutatkozó doboz alatt: az a ritkább, ez a nagyobb */
}

#vez-lyuk {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  pointer-events: none;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}

/* Az első és az utolsó lépésnek nincs mire mutatnia: ilyenkor a keret
   nulla méretű a képernyő közepén, tehát a sötétítés mindent betakar. */
#vezetes.vez-teljes #vez-lyuk { outline: none; }

#vez-buborek {
  position: fixed;
  width: min(26rem, calc(100vw - 24px));
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: 14px;
  line-height: 1.55;
}
#vez-buborek .vez-fej { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#vez-buborek .vez-fej strong { flex: 1; font-size: 15px; }
#vez-buborek p { margin: 0 0 14px; color: var(--text); }
#vez-buborek .vez-gombok { display: flex; align-items: center; gap: 8px; }
#vez-buborek .vez-toltelek { flex: 1; }
#btn-vez-tovabb { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Telefonon a buborék nem a gomb mellé áll — ott nincs hely. Leül a képernyő
   aljára, és onnan mutat: a kiemelt gomb fölötte marad, láthatóan. */
@media (max-width: 40rem) {
  #vez-buborek {
    left: 12px !important;
    right: 12px;
    width: auto;
    top: auto !important;
    bottom: 12px;
  }
}

/* --- Termékfelvitel varázsló ------------------------------------------------
 *
 * A lépéssáv nem díszítés: megmondja, hol tartasz és mennyi van hátra. Enélkül
 * egy lépésenkénti űrlap könnyen olyan érzés, mintha sosem érne véget.
 */
.vf-lepessav { display: flex; flex-wrap: wrap; gap: 4px; }
.vf-lepessav span {
  flex: 1 1 0;
  min-width: 12px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
}
.vf-lepessav span.kesz { background: var(--success, #15803d); }
.vf-lepessav span.itt { background: var(--primary); }

#varazslo-dialog #vf-mezo { font-size: 17px; padding: 12px; }
#varazslo-dialog .dialog-footer { gap: 8px; }

/* --- Lejárt program: csak olvasható (K18) -----------------------------------
 *
 * A nálunk futó program a próba (vagy a kifizetett időszak) után csak olvasható.
 * Ennek végig látszania kell, különben minden mentés „hibának" tűnne — ezért
 * ragad a lap tetejére, mint a nézet-sáv, és megmondja, hol lehet megrendelni.
 */
#csak-olvashato-sav {
  position: sticky;
  top: 0;
  z-index: 61;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: #9a3412;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
#csak-olvashato-sav[hidden] { display: none; }

/* A bejelentett karbantartás sávja (X17): kék, mint a státuszoldalon — tájékoztat, nem riaszt. */
.karbantartas-sav {
  position: sticky; top: 0; z-index: 61;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; background: #1d4ed8; color: #fff; font-size: 13.5px; line-height: 1.4; text-align: center;
}
.karbantartas-sav.folyamatban { background: #1e3a8a; }
.karbantartas-sav[hidden] { display: none; }
.karbantartas-sav a { color: #fff; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .18); text-decoration: none; font-weight: 600; }
.karbantartas-zar { border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.karbantartas-zar:focus-visible { outline: 2px solid #fff; }
/* A státuszoldal Admin ablaka (X17). */
.st-most { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.st-esemenyek { margin: 0; padding-left: 1.1rem; font-variant-numeric: tabular-nums; }
.st-esemenyek li { margin-bottom: 4px; }
/* Határidőnapló (H1): a számok, a sáv, és a sorok színe a határidő szerint. */
.hn-szamok { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hn-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-variant-numeric: tabular-nums; }
.hn-chip.hn-lejart { border-color: var(--danger); color: var(--danger); font-weight: 600; }
.hn-chip.hn-het { border-color: #d97706; color: #d97706; font-weight: 600; }
.hn-sav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.hn-sav select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; }
.hn-ism { display: flex; gap: 6px; }
.hn-ism input { width: 5em; }
#hataridonaplo-dialog textarea { width: 100%; font-family: inherit; }
.hn-tabla td { vertical-align: top; }
.hn-sor.hn-lejart td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.hn-sor.hn-lejart td:first-child strong { color: var(--danger); }
.hn-sor.hn-ma td:first-child, .hn-sor.hn-het td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.hn-sor.hn-lezart td { color: var(--text-muted); }
/* Eszköznyilvántartás (E1–E4): a lejárt garancia / esedékes csere piros, az állapot kis címke. */
.esz-kereses { flex: 1 1 220px; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; }
.esz-lejart { color: var(--danger); font-weight: 600; }
.esz-jel { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.esz-jel-selejt { border-color: var(--danger); color: var(--danger); }
.esz-tabla td:nth-child(3), .esz-tabla td:nth-child(4), .esz-tabla td:nth-child(5) { white-space: nowrap; font-variant-numeric: tabular-nums; }
#eszkozok-dialog textarea { width: 100%; font-family: inherit; }
.hn-tort { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.hn-tort summary { cursor: pointer; }
.menu-badge.menu-badge-piros { background: var(--danger); }
#csak-olvashato-sav a {
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .45);
  text-decoration: none;
}
#csak-olvashato-sav a:hover { background: rgba(255, 255, 255, .3); }

/* --- Nézet-sáv az ügyfélportálon -------------------------------------------
 *
 * Amikor az Admin egy vevő portálját nézi, ennek FOLYAMATOSAN látszania kell.
 * Ezért ragad a lap tetejére: görgetés közben sem tűnik el. A színe
 * szándékosan üt el mindentől — ez nem díszítés, hanem figyelmeztetés.
 */
#nezet-sav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: #b45309;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
#nezet-sav .btn {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-weight: 600;
}
#nezet-sav .btn:hover { background: rgba(255, 255, 255, .3); }

/* --- Összecsukható figyelmeztető doboz -------------------------------------
 *
 * A „Megrendelted már?" doboz a lap tetején áll, és nyitva a fél képernyőt
 * elvitte. Összecsukva a FÜLÖN ott marad a szám — tehát a tennivaló nem
 * tűnik el, csak nem foglal helyet.
 */
.ocr-figyelem.osszecsuk { padding: 0; }
.ocr-figyelem.osszecsuk > summary {
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;                 /* a saját nyilunkat rajzoljuk */
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  user-select: none;
}
.ocr-figyelem.osszecsuk > summary::-webkit-details-marker { display: none; }
.ocr-figyelem.osszecsuk > summary::before {
  content: '▸';
  flex: none;
  color: #b45309;
  transition: transform .15s ease;
}
.ocr-figyelem.osszecsuk[open] > summary::before { transform: rotate(90deg); }
.ocr-figyelem.osszecsuk > summary:hover { background: color-mix(in srgb, #b45309 8%, transparent); }
.ocr-figyelem.osszecsuk > summary:focus-visible { outline: 2px solid #b45309; outline-offset: -2px; }
.ocr-figyelem.osszecsuk > div { padding: 0 12px 10px; }

@media (prefers-reduced-motion: reduce) {
  .ocr-figyelem.osszecsuk > summary::before { transition: none; }
}

/* --- Képek párosítása ------------------------------------------------------
 *
 * Egyszerre egy kép, mellette a döntés. A kép nagy, mert azon múlik minden --
 * a szöveg csak segít eldönteni, de a szemnek kell megerősítenie.
 */
.kp-halado { margin: 0 0 16px; }
.kp-savon { height: 6px; background: var(--surface-muted); border-radius: 3px; overflow: hidden; }
.kp-sav { height: 100%; background: var(--primary); transition: width 0.25s; }
.kp-szamok {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 6px; font-size: 13px; color: var(--text-muted);
}
.kp-szamok strong { color: var(--text); }

.kp-doboz { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.kp-kep {
  flex: 0 0 300px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.kp-kep img {
  width: 300px; height: 300px; object-fit: contain;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.kp-fajl { font-size: 11px; color: var(--text-muted); word-break: break-all; text-align: center; }

.kp-adat { flex: 1 1 320px; min-width: 280px; }
.kp-felismert { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

.kp-azonossag {
  padding: 10px 12px; border-radius: 6px; margin-bottom: 16px;
  background: var(--surface-muted); border-left: 3px solid var(--border);
}
.kp-azonossag.megbizhato { border-left-color: var(--primary); }
.kp-azonossag strong { display: block; margin: 2px 0; }
.kp-cimke {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 600;
}

.kp-kerdes { margin: 0 0 8px; font-weight: 600; }
.kp-jeloltek { display: flex; flex-direction: column; gap: 6px; }
.kp-jelolt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.kp-jelolt:hover { border-color: var(--primary); background: var(--surface-muted); }
.kp-jelolt-nev { font-weight: 500; }

.kp-gombok {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 16px;
}

@media (max-width: 620px) {
  .kp-kep { flex-basis: 100%; }
  .kp-kep img { width: 100%; height: 240px; }
}

/* Megjelenés-választó: nem legördülő, hanem egymás melletti gombok. Így
   egy kattintás a váltás, és rögtön látszik az előnézeten, mit csinál. */
.megj-cim { font-size: 15px; margin: 22px 0 8px; }
.megj-cim:first-of-type { margin-top: 4px; }
.megj-valaszto { display: flex; flex-wrap: wrap; gap: 8px; }
.megj-gomb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.megj-gomb:hover { border-color: var(--primary); }
.megj-gomb.aktiv {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.megj-mit { font-size: 11px; font-weight: 400; opacity: 0.75; }

/* „Felvéve" oszlop: mikor került fel a termék. Keskeny és halvány -- ez
   tájékozódási pont, nem főszereplő. A mai nap viszont kiemelve, mert azt
   keresed a leggyakrabban: mi jött be most. */
.felveve {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.felveve strong { color: var(--text); }

/* Oldalra görgethető doboz széles tartalomnak (táblázat, kód). A LAP maga
   soha nem csúszhat el vízszintesen -- csak ami benne van. */
.tabla-doboz {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 8px 0 12px;
}

/* A súgó menütérképe. Öt hasáb telefonon nem fér ki, ezért a doboz oldalra
   görgethető -- a lap maga soha nem csúszik el vízszintesen. */
.sugo-tabla { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; }
.sugo-tabla th, .sugo-tabla td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.sugo-tabla th { font-weight: 600; white-space: nowrap; }
.sugo-tabla tr:last-child td { border-bottom: none; }

/* „Ezt a számlát már bevételezted." Pirosabb, mint az OCR-figyelmeztetés:
   ott javítani lehet, itt viszont a készlet duplázódna. */
.inv-mar-bevetelezve {
  color: var(--text);
  background: color-mix(in srgb, #b91c1c 10%, transparent);
  border-left: 3px solid #b91c1c;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}
.inv-mar-bevetelezve strong { color: #b91c1c; }
.inv-mar-bevetelezve .hint { display: block; margin-top: 4px; }
.inv-feloldas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 500;
  cursor: pointer;
}
.inv-feloldas input { width: 16px; height: 16px; cursor: pointer; }

/* A felismerésből javított ár: a kiolvasott érték áthúzva mellette, hogy
   látszódjon, min változtatott a program. */
.ocr-javitva {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 6px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.stat-card .stat-value { font-size: 20px; font-weight: 600; display: block; }
.stat-card .stat-label { font-size: 12px; color: var(--text-muted); }
.stat-card.warn { border-color: #b45309; }
.stat-card.warn .stat-value { color: #b45309; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th {
  text-align: left;
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.stat-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.stat-table td.szam { text-align: right; font-variant-numeric: tabular-nums; }
.stat-empty { color: var(--text-muted); font-style: italic; padding: 10px 0; }
.stat-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .stat-two { grid-template-columns: 1fr; } }

/* Frissítés-gomb: csak akkor látszik, ha tényleg van új verzió, ezért
   feltűnőbb a többinél -- de nem harsány, mert ritkán jelenik meg. */
/* A profil-menüben ül, ezért a méretét a .menu-item adja -- itt csak a
   kiemelt szín és a rövid figyelemfelhívó pulzálás. */
.btn-update {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  animation: frissites-figyelem 2.4s ease-in-out 3;
}

/* Külön kell, mert a .menu-item:hover erősebb, mint a .btn-update. */
.menu-item.btn-update:hover { background: var(--primary); filter: brightness(1.12); }
@keyframes frissites-figyelem {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-update { animation: none; }
}
.btn-update:disabled { opacity: 0.6; cursor: wait; }

/* --- Harang: függőben lévő tennivalók --- */

.btn-bell {
  position: relative;
  padding-right: 12px;
}
.bell-badge {
  display: inline-block;
  min-width: 20px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* Az ügyfélportál összecsukható dobozai. A fejléc egy sorban áll: a cím, és
   utána halványan, hogy mi van benne — így nem kell kinyitni ahhoz, hogy
   lássa. Kattintható, tehát mutasson is annak. */
details#profil-doboz > summary,
details#ceg-doboz > summary {
  cursor: pointer;
  list-style: revert;
  padding: 2px 0;
}
details#profil-doboz > summary:hover h3,
details#ceg-doboz > summary:hover h3 { color: var(--primary); }
details#profil-doboz > summary h3,
details#ceg-doboz > summary h3 { margin: 0; }

.pending-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pending-summary span {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  background: var(--surface-muted);
}
.pending-summary b { font-variant-numeric: tabular-nums; }

/* --- Értesítési szabályok listája --- */

.notification-list { display: grid; gap: 10px; }

.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.notification-card.inaktiv { opacity: 0.62; }
.notification-card .n-fo { flex: 1; min-width: 0; }
.notification-card .n-nev { font-weight: 600; }
.notification-card .n-reszlet { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.notification-card .n-gombok { display: flex; gap: 6px; flex-shrink: 0; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

/* --- Katalógus: csoportosított sor és a kinyíló változatok --- */

.catalog-group-row { cursor: pointer; }
.catalog-group-row:hover { background: var(--surface-muted); }

.catalog-variant-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
}

.catalog-variants td { background: var(--surface-muted); padding: 0; }
.catalog-variants table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.catalog-variants th, .catalog-variants td.v {
  padding: 6px 12px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.catalog-variants tr:last-child td.v { border-bottom: none; }
.catalog-variants .v-olcso { font-weight: 700; }

/* --- Kereszt-beszállítói árkereső --- */

.ar-kartya {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
}
.ar-kartya.figyelmeztet { border-left: 3px solid var(--danger); }
.ar-fej { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ar-fej .nev { font-weight: 600; flex: 1 1 auto; min-width: 200px; }
.ar-megtakaritas {
  font-weight: 700;
  white-space: nowrap;
  color: var(--success);
}
.ar-kartya .cikkszam { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.ar-ajanlatok { margin-top: 8px; display: grid; gap: 4px; }
.ar-sor {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 8px; border-radius: 5px; font-size: 14px;
}
.ar-sor.legolcsobb { background: var(--surface-muted); font-weight: 700; }
.ar-sor .ar { min-width: 90px; font-variant-numeric: tabular-nums; }
.ar-sor .datum { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.ar-intes {
  margin-top: 8px; font-size: 13px; color: var(--danger);
  display: flex; gap: 6px; align-items: flex-start;
}


/* --- Súgó ---------------------------------------------------------------- */
/* A fülek a párbeszéd tetején maradnak, mert a tartalom hosszú és görgethető. */
.sugo-fulek {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 0 0 18px; padding-bottom: 0;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.sugo-ful {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.sugo-ful:hover { color: var(--text); }
.sugo-ful.aktiv { color: var(--primary); border-bottom-color: var(--primary); }

.sugo-lap h3 { font-size: 15px; margin: 22px 0 6px; }
.sugo-lap h3:first-child { margin-top: 0; }
.sugo-lap p { margin: 0 0 10px; line-height: 1.6; }

/* A parancsok kijelölhetők maradjanak: a felhasználó ezeket másolja ki. */
.sugo-parancs {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5;
  background: var(--surface-muted); border-left: 3px solid var(--border);
  padding: 10px 12px; margin: 8px 0 10px; overflow-x: auto; white-space: pre-wrap;
  word-break: break-all; user-select: all;
}
.sugo-gond { border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.sugo-gond .tunet { font-weight: 650; margin: 0 0 4px; }

/* --- Kuka: tömeges kijelölés ---------------------------------------------- */
/* Az eszköztár a lista fölött marad, mert több ezer tételnél a görgetés alján
   már senki nem találná meg. */
.kuka-eszkoztar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px;
}
.kuka-mind { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.kuka-kijelolve { font-size: 13px; color: var(--text-muted); flex: 1; }
.trash-item .kuka-jelolo { margin-right: 10px; flex: none; }

/* --- Beszállítói árlisták (több is lehet) --------------------------------- */
.arlista-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.arlista-sor {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--surface-muted);
  border: 1px solid var(--border); border-radius: 6px;
}
/* A fájlnév nyúljon, de ne tolja szét a sort: hosszú neveknél levágjuk. */
.arlista-nev {
  flex: 1 1 auto; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arlista-marka { flex: 0 0 160px; font-size: 13px; padding: 4px 8px; }
.arlista-torol { flex: none; }
@media (max-width: 560px) {
  .arlista-sor { flex-wrap: wrap; }
  .arlista-marka { flex: 1 1 100%; }
}

/* --- Raktár-lapfülek ------------------------------------------------------ */
/* A fülek a terméklista fölött ülnek. Sok raktárnál vízszintesen görgethetők,
   de a lista maga soha nem csúszik el oldalra. */
.raktar-sav {
  display: flex; align-items: flex-end; gap: 12px;
  border-bottom: 2px solid var(--border); margin-bottom: 12px;
}
.raktar-fulek { display: flex; gap: 2px; flex: 1 1 auto; overflow-x: auto; }
.raktar-ful {
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
}
.raktar-ful:hover { color: var(--text); }
.raktar-ful.aktiv { color: var(--primary); border-bottom-color: var(--primary); }
.raktar-ful .raktar-db {
  font-weight: 400; font-size: 12px; color: var(--text-muted); margin-left: 6px;
}
.raktar-muveletek { display: flex; gap: 6px; padding-bottom: 6px; flex: none; }

/* A kiválasztott raktár adatai egy sorban, a lista fölött. */
.raktar-fej {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--text-muted);
  padding: 0 2px 12px;
}
.raktar-fej b { color: var(--text); font-weight: 600; }
@media (max-width: 620px) {
  .raktar-sav { flex-direction: column; align-items: stretch; gap: 6px; }
  .raktar-muveletek { justify-content: flex-end; padding-bottom: 8px; }
}

/* ===========================================================================
   NYOMTATÁS
   ===========================================================================

   A képernyő és a papír két különböző műfaj. A képernyőn szűrők, gombok,
   lapozó és menü van; a papíron ezek mind szemetet jelentenek. Ezért nem a
   képernyőt nyomtatjuk, hanem a #nyomtatvány dobozba építünk egy külön
   dokumentumot, és nyomtatáskor csak az látszik.

   Képernyőn a doboz rejtve van, tehát a felületet nem zavarja. */

#nyomtatvany { display: none; }

@media print {
  /* Minden más eltűnik -- a nyitott felugró ablakok is, mert azokból a
     böngésző egy fekete hátteret nyomtatna a lap tetejére. */
  body > *:not(#nyomtatvany) { display: none !important; }
  dialog[open] { display: none !important; }

  #nyomtatvany {
    display: block;
    background: #fff;
    color: #000;
    font: 11pt/1.4 "Segoe UI", system-ui, sans-serif;
  }

  /* Fehér papír, fekete tinta -- a sötét mód a képernyőé. */
  html, body {
    background: #fff !important;
    color: #000 !important;
    margin: 0;
    padding: 0;
  }

  @page { margin: 14mm 12mm; }

  /* --- Fejléc: kitől jön az irat ---------------------------------------- */
  .ny-fej {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px;
  }
  .ny-ceg { font-size: 10pt; line-height: 1.35; }
  .ny-ceg b { font-size: 12pt; display: block; margin-bottom: 2px; }
  .ny-kelt { font-size: 9.5pt; text-align: right; white-space: nowrap; }

  .ny-cim { font-size: 16pt; font-weight: 700; margin: 0 0 2px; }
  .ny-alcim { font-size: 10pt; color: #333; margin: 0 0 14px; }

  /* --- Táblázat ---------------------------------------------------------- */
  .ny-tabla { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .ny-tabla th {
    text-align: left; border-bottom: 1.5px solid #000; padding: 5px 6px;
    font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .ny-tabla td { padding: 4px 6px; border-bottom: 1px solid #ccc; vertical-align: top; }
  .ny-tabla .sz { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* A fejléc minden lap tetején ismétlődjön, különben a második oldaltól
     nem lehet tudni, melyik oszlop micsoda. */
  .ny-tabla thead { display: table-header-group; }
  .ny-tabla tr { page-break-inside: avoid; }

  /* Leltárívnél kézzel kitöltendő rubrika. */
  .ny-tabla .ures { border-bottom: 1px solid #000; min-width: 70px; }

  /* --- Összegzés és lábjegyzet ------------------------------------------ */
  .ny-osszeg {
    margin-top: 12px; text-align: right; font-size: 11pt;
    border-top: 2px solid #000; padding-top: 8px;
  }
  .ny-osszeg b { font-size: 13pt; }
  .ny-megjegyzes { margin-top: 14px; font-size: 9.5pt; white-space: pre-wrap; }
  .ny-lab {
    margin-top: 22px; padding-top: 8px; border-top: 1px solid #999;
    font-size: 8.5pt; color: #444;
  }
  .ny-alairas {
    margin-top: 34px; display: flex; justify-content: space-between; gap: 40px;
    font-size: 9pt; page-break-inside: avoid;
  }
  .ny-alairas div { flex: 1; border-top: 1px solid #000; padding-top: 5px; text-align: center; }

  .ny-adatpar { font-size: 10pt; margin: 0 0 3px; }
  .ny-adatpar b { display: inline-block; min-width: 130px; }
}

/* A menüpont melletti szám: hány szkennelés vár átnézésre. Ugyanaz a
   formanyelv, mint a fejlécbeli harangé. */
.menu-badge {
  display: inline-block;
  margin-left: 8px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}

/* A terméklista sorvégi gombjai egymás mellett, ne törjenek külön sorba. */
.sor-muveletek { white-space: nowrap; }
.sor-muveletek .btn-icon + .btn-icon { margin-left: 2px; }

/* --- Kereső a vonalkód-gombbal -------------------------------------------
   A gombok a mezőn BELÜL ülnek, hogy a fejléc ne tördeljen tőlük, és hogy
   telefonon is elférjen a keresőmező. */
.kereso-doboz { position: relative; display: flex; flex: 1 1 260px; max-width: 460px; }
/* A jobbra abszolút pozicionált gomboknak helyet kell hagyni a mezőben:
   három gomb (kamera, mikrofon, törlés) fér el, egyenként 28 képpontnyi
   osztásban. Ha ide új gomb kerül, ezt a paddingot is növelni kell -- különben
   a beírt szöveg a gombok alá csúszik. */
.kereso-doboz input { flex: 1; padding-right: 96px; width: 100%; }
.kereso-gomb {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px; color: var(--text-muted);
  border-radius: 6px;
}
.kereso-gomb:hover { background: var(--surface-muted); color: var(--text); }
#btn-kereso-szkenner { right: 4px; }
#btn-kereso-mic { right: 32px; }
#btn-kereso-torol { right: 60px; }

/* A szűrők a lenyílóban: címke fölött, mező alatta. */
.szuro-blokk { padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.szuro-blokk label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.szuro-blokk select {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 14px; width: 100%;
}
/* Ha szűrve van valami, a gombon látszódjon -- különben a felhasználó azt
   hiszi, üres a lista, pedig csak szűkítve van. */
.menu-btn.szur-aktiv { border-color: var(--primary); color: var(--primary); }

/* --- Raktárválasztó telefonon --------------------------------------------
   Nagy képernyőn a lapfülek a jobbak: egy pillantásra látszik mind, és
   egy kattintás a váltás. Telefonon viszont tördelnek, és két sort visznek
   el abból a kevésből, ami van — ott a fejlécbe tett menü a helyes. */
.raktar-menu { display: none; }
/* A hosszú raktárnév ne tolja szét a fejlécet. */
.raktar-menu .menu-btn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.raktar-menu-tetel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.raktar-menu-tetel:hover { background: var(--surface-muted); }
.raktar-menu-tetel.aktiv { background: var(--accent-bg); color: var(--primary); font-weight: 600; }
.raktar-menu-tetel .db { font-size: 12px; color: var(--text-muted); font-weight: 400; }

@media (max-width: 900px) {
  .raktar-menu { display: block; }
  /* A lapfülsor és a hozzá tartozó gombok eltűnnek — a menü átvette a dolgukat. */
  .raktar-sav { display: none; }

  /* A fejléc első sora: cím, raktár, majd jobbra a hamburger.
     Sorrendet CSS-ből adunk, mert a HTML-ben a hamburger előbb van — az a
     nagy képernyős elrendezéshez való.

     A cím zsugorodhat és hármaspontot kap: enélkül egy hosszabb raktárnév
     kitolná a hamburgert a következő sorba. Mérve: a három elem együtt 351
     képpont volt 347 helyen -- négy képponton múlt. */
  .topbar h1 {
    order: 1; font-size: 17px;
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .raktar-menu { order: 2; flex: 0 1 auto; min-width: 0; }
  /* Annyit kap, amennyi a hamburger mellett marad -- ne tolja azt a
     következő sorba. A hosszabb név hármaspontot kap, a teljes a menüben
     úgyis ott van. */
  .raktar-menu .menu-btn { max-width: calc(100vw - 130px); }
  /* A raktárválasztó a saját gombja alatt, BALRA igazítva. */
  .raktar-menu .menu-panel {
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% + 4px);
    z-index: 70;
    min-width: 220px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }
  .mainnav { order: 4; }
  /* A cselekvések sora: az "+ Új termék" balra, a profil a jobb szélre --
     pont a hamburger alá. A harang közéjük esik, ha van függő rendelés. */
  .topbar-right { order: 5; flex-basis: 100%; }
  .topbar-right .menu-end { margin-left: auto; }
}

/* Telefonon a program címe a legkevesebbet érő elem a fejlécben: aki megnyitotta,
   tudja, melyik programban van, és a böngészőfül is kiírja. A raktár neve
   viszont azt mondja meg, MIT néz éppen -- az többet ér ugyanazon a helyen.
   Ezért keskeny képernyőn a cím elmarad, és a raktárnév kap teljes helyet.
   Visszahozni egy sor törlése. */
@media (max-width: 560px) {
  .topbar h1 { display: none; }
}

/* --- A profilgomb felirata ------------------------------------------------
   Nagy képernyőn a teljes név és a szerepkör; telefonon csak a keresztnév.
   Egy teljes név szerepkörrel („Kovács Anna (Admin)") 195 képpont, ami a fejlécet annyira
   szétnyomja, hogy a Nyomtatás külön sorba esik — a keresztnév viszont
   elfér, és a teljes név úgyis ott van a lenyílóban.

   Biztonsági háló: ha a keresztnév is hosszú, hármaspontot kap. */
.nev-rovid { display: none; }
@media (max-width: 900px) {
  .nev-teljes { display: none; }
  .nev-rovid { display: inline; }

  /* A keresőmező kapja a teljes sort: telefonon abba gépelsz a legtöbbet,
     és félszélességben a hosszabb terméknév már nem látszik ki benne.
     A két szűrőgomb alatta elfér egy sorban. */
  .kereso-doboz { flex: 1 0 100%; max-width: none; }
  .current-user-indicator {
    display: inline-block; max-width: 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
  }
}

/* --- „Vevő előtt": a beszerzési ár elrejtése ------------------------------
   Amikor a pult mögül megmutatod a képernyőt a vevőnek, a beszerzési árnak
   nincs ott keresnivalója. A jelölés a cellákon van, nem az oszlop sorszámán:
   így ha valaha átrendeződnek az oszlopok, ez nem romlik el csendben. */
body.ar-rejtve .ar-beszerzes { display: none; }

/* A raktár összegzése — fent röviden, lent részletesen (a képernyő aljához tapad). */
.raktar-osszeg-fent { font-size: 13px; color: var(--text-muted); margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.raktar-osszeg-fent strong { color: var(--text); font-weight: 600; }
.raktar-osszeg {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 10px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
  display: grid; gap: 6px; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.raktar-osszeg-sor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.raktar-osszeg-cim { font-weight: 600; min-width: 150px; }
.raktar-osszeg-ertek strong { font-size: 15px; }
.raktar-osszeg-ertek .hint { margin-left: 4px; }
.raktar-osszeg-sor.kijelolt { border-top: 1px dashed var(--border); padding-top: 6px; }

/* Ha be van kapcsolva, azt látni kell — különben napokig keresnéd, hova lett
   az ár. */
#btn-ar-rejt.ar-rejt-aktiv {
  border-color: var(--primary);
  background: var(--accent-bg);
}

/* --- Partneri ár a terméklistán -------------------------------------------
   Az áthúzott listaár nem díszítés: abból látod, mennyit engedtél. */
.ar-jel {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ar-akcio { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ar-kedv  { background: var(--accent-bg); color: var(--primary); }
.ar-listaar {
  margin-left: 6px; font-size: 11px; color: var(--text-muted);
  text-decoration: line-through; white-space: nowrap;
}

/* Ha nem a listaár látszik, azt a mezőn is jelezzük. A méretét a
   .szuro-blokk adja — a mező a Szűrők panelben van, nem a fejlécben. */
#ar-partner.ar-partner-aktiv { border-color: var(--primary); color: var(--primary); }
#ar-oszlop-cimke { color: var(--primary); font-weight: 600; text-transform: none; }

/* --- A Szűrők panel szakaszai --------------------------------------------- */
/* A Szűrők panel szélesebb a többinél: legördülők és egy keresőmező van benne,
   azok 210 képponton összenyomódnak. */
#btn-szurok ~ .menu-panel { min-width: 300px; }

.szuro-cimke {
  padding: 6px 10px 2px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.szuro-blokk input[type="text"] {
  flex: none;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 14px; width: 100%;
}
.szuro-jelolo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 14px; color: var(--text); cursor: pointer;
  border-radius: 6px;
}
.szuro-jelolo:hover { background: var(--surface-muted); }

/* A Szűrők gombon jelezzük, ha a beszerzési ár el van rejtve. A menübe temetve
   különben észrevétlen maradna, hogy be van kapcsolva -- és napokig keresnéd,
   hova lett az ár. */
.szur-jel { margin-left: 6px; }

/* A fizetési mód halkan a jelzés mellett: az állapot a fontos, a mód csak
   magyarázza. */
.fizetes-mod { margin-left: 6px; font-size: 12px; color: var(--text-muted); }

/* Az ügyfélportálon: ami már a vevőnél van, de még nincs kifizetve (Ü3). Egy
   mondat a táblázat fölött — borostyán keret, a szöveg színe a témából jön. */
.portal-fizetesre-var {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #f59e0b; background: rgba(245, 158, 11, .12); font-weight: 600;
}

/* --- Beolvasott webshopos rendelés ---------------------------------------- */
/* Rendelésenként egy kártya: a webshop lapján is így állnak egymás alatt, és
   külön-külön dönt róluk az ember. */
.os-kartya {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.os-kartya-fej { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.os-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.os-tabla th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding: 5px 8px; white-space: nowrap;
}
.os-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.os-tabla tr:last-child td { border-bottom: none; }
.os-tabla .szam-cella { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Szűk kijelzőn a táblázat görgethető legyen, ne a fél oldal csússzon el. */
#os-eredmeny { overflow-x: auto; }

/* --- Allapot es hibak ----------------------------------------------------- */
.allapot-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.allapot-doboz {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
}
.allapot-doboz .ertek {
  display: block; font-size: 20px; font-weight: 650;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.allapot-doboz .cimke { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* A bajos ertek piros, hogy ranezesre kiugorjon a tobbi kozul. */
.allapot-doboz.baj { border-color: var(--danger); }
.allapot-doboz.baj .ertek { color: var(--danger); }

.hiba-sor {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface);
}
.hiba-fej { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hiba-fej .db {
  font-variant-numeric: tabular-nums; font-weight: 650;
  padding: 1px 7px; border-radius: 10px;
  background: var(--surface-muted); color: var(--text-muted); font-size: 12px;
}
.hiba-uzenet { flex: 1 1 260px; font-weight: 600; word-break: break-word; }
.hiba-reszlet { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.hiba-sor pre {
  font-size: 11.5px; margin: 6px 0 0; padding: 8px 10px;
  background: var(--surface-muted); border-radius: 4px;
  overflow-x: auto; white-space: pre; line-height: 1.45;
}

/* --- AI asszisztens ------------------------------------------------------- */
.asz-beszelgetes {
  min-height: 120px; max-height: 40vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin: 12px 0; background: var(--surface);
}
.asz-ures { color: var(--text-muted); font-size: 13px; margin: 0; }
.asz-sor { margin-bottom: 10px; display: flex; gap: 8px; align-items: flex-start; }
.asz-sor:last-child { margin-bottom: 0; }
.asz-ki { font-size: 11px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; padding-top: 2px; min-width: 42px; }
.asz-szoveg { flex: 1; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
/* A sajat uzenet halkabb: a valasz a fontos, azt olvassa az ember. */
.asz-sor.enyem .asz-szoveg { color: var(--text-muted); }

.asz-bevitel { display: flex; gap: 8px; align-items: flex-end; }
.asz-bevitel textarea { flex: 1; resize: vertical; }

#asz-piszkozat table { width: 100%; border-collapse: collapse; font-size: 13px; }
#asz-piszkozat th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding: 5px 8px;
}
#asz-piszkozat td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
#asz-piszkozat tr:last-child td { border-bottom: none; }
#asz-piszkozat .szam-cella { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.asz-fej { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.asz-fej strong { color: var(--text); }

/* --- A vállalkozás iratai ------------------------------------------------- */
.ci-kartya {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
/* A lejárt vagy hamarosan lejáró irat piros csíkot kap: a listát átfutva is
   kiugrik, nem kell hozzá elolvasni a dátumokat. */
.ci-kartya.baj { border-left-color: var(--danger); }
.ci-fej { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ci-fej-vege { margin-left: auto; display: flex; gap: 6px; }
.ci-adat {
  display: flex; gap: 10px; font-size: 13px; padding: 3px 0;
  border-top: 1px solid var(--border);
}
.ci-adat span { color: var(--text-muted); min-width: 150px; flex-shrink: 0; }
.ci-adat strong { font-weight: 500; word-break: break-word; }
#cegirat-uj-doboz summary { cursor: pointer; list-style: none; }
#cegirat-uj-doboz summary::-webkit-details-marker { display: none; }

/* --- Levélsablonok -------------------------------------------------------- */
.ls-sablon {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
}
.ls-sablon summary { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.ls-sablon textarea { font-family: inherit; font-size: 13.5px; line-height: 1.5; }
.ls-sablon label { display: block; font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* --- Biztonsági mentések -------------------------------------------------- */
.mentes-sor {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
}
.mentes-fej { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mentes-fej .datum { font-weight: 650; }
.mentes-fej .meret { margin-left: auto; color: var(--text-muted); font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
/* A visszaállítás parancsa: egy kattintásra kijelölhető, mert a szerveren
   kell beírni, gyakran telefonról olvasva. */
.mentes-parancs {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  background: var(--surface-muted); border-radius: 4px;
  padding: 7px 9px; margin: 7px 0 0; overflow-x: auto;
  white-space: pre-wrap; word-break: break-all; user-select: all;
}

/* --- A penz oldala: kintlevoseg es arres ---------------------------------- */
/*
   Egyetlen nagy szam elol, alatta a reszletek. Ezt a ket ablakot nem
   bongeszik, hanem ranéznek: "mennyi van kint" es "mennyit keresek". Ezert
   all a szam a lap tetejen, nem egy tablazat vegen.
   A szinek a meglevo valtozokbol jonnek, tehat sotet temaban is jok.
*/
.penz-osszeg {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; margin-bottom: 4px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}
.penz-ertek {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  color: var(--text);
}
.penz-cimke { font-size: 13px; color: var(--text-muted); }

/* A szam-oszlopok jobbra zarva es azonos szelessegu szamjegyekkel: kulonben
   a forintosszegek nem allnak egymas alatt, es ranezesre osszehasonlithatatlanok. */
.penz-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.penz-tabla th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding: 6px 8px; white-space: nowrap;
}
.penz-tabla td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.penz-tabla tr:last-child td { border-bottom: none; }
.penz-tabla .szam-cella {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Szuk kijelzon a tablazat gorduljon, ne az egesz oldal csusszon el. */
.table-wrap { overflow-x: auto; }

.badge-warn { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-warn { background: #3a2e11; color: #e6c164; }
}
:root[data-theme="dark"] .badge-warn { background: #3a2e11; color: #e6c164; }

/* --- Amit en tartozom: beszallitonkent, reszfizetesekkel ------------------- */
/*
   Beszallitonkent egy blokk, benne rendelesenkent egy kartya, es azon belul az
   utalasok sorai. A harom szint vizualisan is harom szint legyen, kulonben egy
   husz utalasos beszallitonal semmit nem lehet kiolvasni belole.
*/
.tartozas-blokk {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px; background: var(--surface);
}
.tartozas-fej { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tartozas-fej h3 { margin: 0; font-size: 16px; flex: 1 1 auto; }
.tartozas-fej-osszeg { font-variant-numeric: tabular-nums; white-space: nowrap; }

.tartozas-rendeles {
  border-left: 3px solid var(--primary);
  background: var(--surface-muted);
  padding: 9px 12px; margin: 8px 0 0; border-radius: 0 4px 4px 0;
}
/* A rendezett rendeles halkabb: ott van elozmenynek, de nem az kell most. */
.tartozas-rendeles-kesz { border-left-color: var(--border); opacity: 0.72; }
.tartozas-rendeles-fej {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  justify-content: space-between;
}
.tartozas-szamok { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tartozas-rendeles-alcim { margin: 3px 0 0; }
.tartozas-gombok { margin-top: 8px; }

/* Egy utalas egy sor. A datum es az osszeg fix szelessegu oszlop, hogy tobb
   utalasnal egymas ala essenek -- kulonben ranezesre osszeadhatatlanok. */
.fizetes-lista {
  margin: 8px 0 0; border-top: 1px solid var(--border); padding-top: 6px;
}
.fizetes-sor {
  display: grid;
  grid-template-columns: 92px 110px minmax(120px, 1fr) minmax(0, 1.2fr) 28px;
  gap: 8px; align-items: baseline;
  padding: 3px 0; font-size: 13px;
}
.fizetes-datum { color: var(--text-muted); white-space: nowrap; }
.fizetes-osszeg { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.fizetes-hiv { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
.fizetes-megj { color: var(--text-muted); }
.fizetes-torol { opacity: 0.5; }
.fizetes-torol:hover { opacity: 1; color: var(--danger); }

/* Telefonon a ot oszlop nem fer ki: egymas ala kerulnek, a torles a vegen. */
@media (max-width: 620px) {
  .fizetes-sor { grid-template-columns: 1fr auto; gap: 2px 8px; }
  .fizetes-osszeg { text-align: left; }
  .fizetes-hiv, .fizetes-megj { grid-column: 1 / -1; }
  .fizetes-torol { grid-row: 1; grid-column: 2; }
}

/* --- Cegkereso a rendeles-urlapon ----------------------------------------- */
/*
   A talalatok a mezo ala nyilnak, nem uj sorba: a pult mellett allo embernek a
   szeme a mezon van, nem az urlap aljan. Ezert kell a `position: relative` a
   mezot tarto dobozra es az `absolute` a listara.
*/
.field-ceg { position: relative; }
.hint-inline { font-weight: 400; font-size: 12px; color: var(--text-muted); }

.kereso-talalatok {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: 280px; overflow-y: auto; margin-top: 2px;
}
.kereso-talalat {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit;
}
.kereso-talalat:last-child { border-bottom: none; }
.kereso-talalat:hover, .kereso-talalat:focus-visible { background: var(--surface-muted); }
.kereso-nev { display: block; font-weight: 600; font-size: 14px; }
.kereso-reszlet { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.kereso-ures { padding: 9px 10px; font-size: 13px; color: var(--text-muted); }

/* --- "Kitol szerezheto be?" a rendeles tetelsoraban ----------------------- */
/*
   A tetelsor ALATT nyilik, nem uj ablakban: a kerdes ("kitol vegyem?") a
   tetelhez tartozik, nem kulon feladat. Egy ablak megnyitasa itt elszakitana
   a valaszt a kerdestol.
*/
.kito-panel {
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.kito-fej {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.kito-sor {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 110px minmax(130px, 1fr);
  grid-template-areas: "beszallito ar datum" "nev nev nev";
  gap: 2px 10px; align-items: baseline;
  width: 100%; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 9px; margin-bottom: 4px; cursor: pointer;
}
.kito-sor:hover, .kito-sor:focus-visible { border-color: var(--primary); }
.kito-beszallito { grid-area: beszallito; font-weight: 600; }
/* Az ar jobbra zarva es azonos szelessegu szamjegyekkel: kulonben a sorok
   arait ranezesre nem lehet osszehasonlitani -- pedig pont az a kerdes. */
.kito-ar {
  grid-area: ar; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap;
}
.kito-datum { grid-area: datum; font-size: 12px; color: var(--text-muted); }
.kito-regi { color: #92400e; font-weight: 600; }
.kito-nev { grid-area: nev; font-size: 12px; color: var(--text-muted); }
.kito-figyelmeztetes { margin: 6px 0 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kito-regi { color: #e6c164; }
}
:root[data-theme="dark"] .kito-regi { color: #e6c164; }

@media (max-width: 620px) {
  .kito-sor {
    grid-template-columns: 1fr auto;
    grid-template-areas: "beszallito ar" "datum datum" "nev nev";
  }
  .kito-datum { text-align: left; }
}

/* --- A hianyzo ar potlasa ott, ahol kiderult ------------------------------ */
/*
   Nem uj ablak: a kerdes ("mennyi volt ez?") ahhoz a sorhoz tartozik, ahol a
   hiany kiderult. Egy ablak elszakitana a valaszt a kerdestol, es utana meg
   vissza is kellene talalni ide.
*/
.ar-potlas-panel {
  margin: 8px 0 0; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--primary);
  border-radius: var(--radius);
}
.ar-potlas-fej {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 7px;
}
.ar-potlas-sor {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px; align-items: center; margin-bottom: 5px;
}
.ar-potlas-nev { font-size: 13px; }
/* A hianyzo mezo ne nezzen ki ugyanugy, mint a kitoltott: az egyik tennivalo,
   a masik kesz. */
.ar-potlas-mezo { width: 100%; font-variant-numeric: tabular-nums; text-align: right; }
.ar-potlas-mezo:placeholder-shown { border-color: var(--danger); }
.ar-potlas-gombok { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.ar-potlas-uzenet { margin: 6px 0 0; }

/* A hivatkozas beirhato utolag is: legyen lathato, hogy kattinthato. */
.fizetes-hiv[role="button"] { cursor: pointer; }
.fizetes-hiv[role="button"]:hover { text-decoration: underline; color: var(--primary); }

/* --- Termekadat a beszallitoi linkbol ------------------------------------- */
.order-item-link-sor { grid-template-columns: minmax(0, 1fr) auto; margin-top: 6px; }
.link-panel {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.link-kep {
  width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
}
.link-adat { min-width: 0; font-size: 13px; }

/* --- Koltsegek ------------------------------------------------------------ */
/* A kikapcsolt koltseg halkabb: ott van a listaban, hogy vissza lehessen
   kapcsolni, de nem az kell most. */
.koltseg-kikapcsolt { opacity: 0.55; }
.koltseg-kikapcsolt td { text-decoration: line-through; }
.koltseg-kikapcsolt .hint, .koltseg-kikapcsolt .badge { text-decoration: none; }

/* --- Utnyilvantarto ------------------------------------------------------- */
.ut-eszkozsor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ut-eszkozsor select { min-width: 180px; }

.ut-jarmu {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px; background: var(--surface);
}
.ut-jarmu-inaktiv { opacity: 0.6; }
.ut-jarmu-fej { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ut-jarmu-fej h3 { margin: 0; font-size: 16px; flex: 1 1 auto; }
.ut-jarmu-szamok { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A lyuk a nyilvantartas legfontosabb jelzese: legyen az, ami eloszor
   szembe jon, ne egy halk sor a tablazat aljan. */
.ut-lyuk {
  border-left: 3px solid var(--danger);
  background: var(--surface-muted);
  padding: 8px 11px; margin: 8px 0; border-radius: 0 4px 4px 0;
  font-size: 13px;
}

/* --- Hazi penztar --------------------------------------------------------- */
/* A negativba fordult sor legyen az, ami eloszor szembe jon: ott hianyzik egy
   tetel, es minel elobb derul ki, annal konnyebb megtalalni. */
.penztar-negativ td { background: var(--danger-bg, rgba(220, 38, 38, 0.08)); }
.penztar-negativ td:last-child, .penztar-negativ td:nth-last-child(2) { font-weight: 600; }

/* --- Rejtett koltsegek ---------------------------------------------------- */
/* Amit a program NEM lat: mindegyikhez magyarazat ES teendo tartozik. Egy
   puszta felsorolas nem segit, csak rossz erzest kelt. */
.rejtett-tetel {
  border-left: 3px solid var(--accent-border);
  background: var(--surface-muted);
  padding: 9px 12px; margin-bottom: 8px; border-radius: 0 4px 4px 0;
}
.rejtett-tetel em { color: var(--text); font-style: normal; font-weight: 600; }

/* --- Csomag-jelző: „1 944 / 5 000 termék" -----------------------------------
   Csak akkor jelenik meg, ha a példánynak van felső határa. A betelt csomag
   nem hiba, hanem állapot -- ezért figyelmeztető, de nem riasztó szín. */
.csomag-jelzo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); background: var(--surface-2, rgba(127,127,127,.08));
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; white-space: nowrap; align-self: center;
}
.csomag-jelzo.betelt { color: var(--warning, #8A5B0C); border-color: currentColor; }
.csomag-jelzo.baj { color: var(--danger); border-color: currentColor; }
.csomag-jelzo .demo {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10px;
}
.csomag-jelzo-sor { display: flex; justify-content: flex-end; }
.csomag-jelzo-sor:has(> [hidden]) { display: none; }


/* --- Fejléc keskeny telefonon ------------------------------------------------
   Mérve (2026-09-20): a jobb oldali gombsor 355 pixelt kér. Egy 360 pixeles
   telefonon ez épp kilóg, és a profil gomb (az „Admin") kicsúszik a képernyő
   jobb szélén túlra — pont az, amire a leginkább szükség van.

   Két dolgot teszünk: a feliratokat elhagyjuk (az ikon egyértelmű), és
   megengedjük a sortörést. Így a gomb inkább új sorba kerül, mint a semmibe. */
@media (max-width: 460px) {
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .topbar-right .gomb-szoveg { display: none; }
  /* A profil gombon a név is elmarad: a teljes név a lenyíló panelben ott van. */
  .topbar-right .current-user-indicator { display: none; }
}


/* --- Diktáló gomb, ami a fókuszt követi -------------------------------------
   Egy gomb az egész programra. Ahová beállsz, ott jelenik meg a mező jobb
   szélén; ha elhagyod a mezőt, eltűnik. Telefonon ez a lényeg: ne kelljen
   begépelni semmit. */
.diktalo-gomb {
  position: fixed;
  z-index: 200;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 17px; line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.diktalo-gomb:hover { border-color: var(--primary); }
.diktalo-gomb.listening { background: #fee2e2; color: var(--danger); animation: mic-pulse 1s infinite; }
/* Amíg hallgat, a mező is jelöli magát: enélkül nem látszik, hova kerül a szöveg. */
.diktalas-alatt { outline: 2px solid var(--danger) !important; outline-offset: 1px; }

/* --- Az első belépés üdvözlése ---------------------------------------------
   Kicsi, barátságos ablak: egy mondat, két lépés, két gomb. Nem hirdetés —
   ha többet mondana, átugranák. */
dialog#udvozles-dialog { width: min(30rem, calc(100vw - 32px)); }
.udvozles .udv-jel { font-size: 2.2rem; line-height: 1; margin: 0 0 6px; }
.udvozles h2 { margin: 0 0 8px; }
.udvozles #udv-szoveg { margin: 0; }
.udv-lepesek { margin: 14px 0 0; padding-left: 1.25rem; display: grid; gap: 6px; }

/* --- Díjbekérő ---------------------------------------------------------------
   A kiállítás ELŐTTI összegzés: mi megy ki, kinek, mennyiért. Az összegek
   jobbra zárva, egyforma széles számjegyekkel — oszlopban olvasva. */
dialog#dijbekero-dialog, dialog#szamla-dialog { width: min(40rem, calc(100vw - 32px)); }
/* A kiállított számlák sora: a szám, a PDF és a sztornó egy sorban, de kis
   kijelzőn tördelve — a sztornó gomb ne csússzon ki a képernyőről. */
.vsz-sor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 3px 0; }
.vsz-sztornozva { color: var(--danger); font-size: .9rem; }
.btn-link {
  background: none; border: none; padding: 0; font: inherit; font-size: .9rem;
  color: var(--danger); text-decoration: underline; cursor: pointer;
}
.btn-link:hover { text-decoration: none; }
.vsz-sztorno-doboz {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--danger); border-radius: 8px; background: var(--surface-muted);
}
.vsz-sztorno-cim { margin: 0 0 6px; font-weight: 600; }
.vsz-sztorno-gombok { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tabla-gorgeto { overflow-x: auto; }
.db-tetelek { width: 100%; border-collapse: collapse; font-size: .92rem; }
.db-tetelek th, .db-tetelek td { padding: 6px 8px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; }
.db-tetelek .szam { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-tetelek tfoot th { border-bottom: none; font-weight: 700; }

/* --- Felviteli fülek: űrlap · varázsló · asszisztens ---------------------- */
/* Három út ugyanahhoz az adathoz. A fülsor mindhárom ablak tetején ugyanaz,
   hogy a váltás ne legyen felfedeznivaló. */
.felvitel-fulek {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.felvitel-ful {
  font: inherit; font-size: .92rem; padding: 6px 12px; cursor: pointer;
  background: var(--surface-muted); color: var(--text-muted, inherit);
  border: 1px solid var(--border, #e5e7eb); border-radius: 999px;
}
.felvitel-ful:hover { border-color: var(--primary, #2563eb); }
.felvitel-ful.aktiv {
  background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb);
}
.felvitel-ful:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }

/* A termék-asszisztens piszkozata: címke és érték egymás mellett. */
.tasz-sor {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; border-bottom: 1px solid var(--border-muted, #f0f1f3);
}
.tasz-sor:last-child { border-bottom: none; }
.tasz-sor span { color: var(--text-muted, #6b7280); font-size: .9rem; }

/* --- 🧺 „Be kell szerezni” (TERV VR + X2) ------------------------------------
   Felül a gyors felvétel (a pult mellett, akár vonalkód-olvasóval), alatta a
   lista beszállítónként. A sor rácsa: termék · mennyiség · ár · gombok; a
   „kitől szerezhető be” panel a sor alatt nyílik, teljes szélességben. */
.beszerzendo-ablak { width: min(980px, 96vw); }
.bsz-felvetel {
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius);
}
.bsz-cimke { display: block; font-weight: 600; margin-bottom: 6px; }
.bsz-kereso-sor { display: flex; gap: 8px; }
.bsz-kereso-sor input { flex: 1; min-width: 0; font-size: 16px; }
.bsz-talalatok { display: grid; gap: 4px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.bsz-talalat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nev keszlet" "adat keszlet";
  gap: 0 12px; align-items: center; width: 100%; padding: 8px 10px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.bsz-talalat:hover, .bsz-talalat:focus-visible { border-color: var(--primary); }
.bsz-talalat-nev { grid-area: nev; font-weight: 600; overflow-wrap: anywhere; }
.bsz-talalat-adat { grid-area: adat; font-size: 12px; color: var(--text-muted); }
.bsz-talalat-keszlet {
  grid-area: keszlet; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap;
}
.bsz-szabad { border-style: dashed; }
.bsz-nincs { margin: 4px 2px; }
.bsz-valasztott { display: grid; gap: 8px; margin-top: 10px; }
.bsz-mezok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bsz-szam { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.bsz-szam input { width: 76px; font-variant-numeric: tabular-nums; }
.bsz-mezok input[type="text"] { flex: 1 1 220px; min-width: 0; }
.bsz-gombok { display: flex; gap: 8px; }
.bsz-uzenet { margin: 8px 0 0; min-height: 1em; }

/* Az oszlop szűkülhessen: a táblázatok a saját sávjukban görögnek, és nem
   fújhatják fel az egész listát (telefonon így lógott ki minden csoport). */
.bsz-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bsz-csoport { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bsz-csoport-fej {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px;
  background: var(--surface-muted); border-bottom: 1px solid var(--border);
}
.bsz-csoport-fej h3 { margin: 0; font-size: 15px; }
.bsz-csoport-fej .btn { margin-left: auto; }
.bsz-csoport > .hint { margin: 8px 12px 0; }
.bsz-sor {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 96px auto;
  grid-template-areas: "fo db ar muv" "kito kito kito kito";
  gap: 4px 12px; align-items: center; padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.bsz-csoport-fej + .bsz-sor, .bsz-csoport > .hint + .bsz-sor { border-top: none; }
.bsz-sor-fo { grid-area: fo; min-width: 0; }
.bsz-nev { overflow-wrap: anywhere; }
.bsz-forras { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.bsz-megj { margin-top: 2px; font-size: 13px; font-style: italic; }
.bsz-figyel { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--danger); }
.bsz-db { grid-area: db; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bsz-db input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.bsz-ar { grid-area: ar; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bsz-muveletek { grid-area: muv; display: flex; justify-content: flex-end; gap: 6px; }
.bsz-kito { grid-area: kito; }
.bsz-pult { background: #dbeafe; color: #1d4ed8; }
.bsz-ures { padding: 20px 12px; text-align: center; }
.bsz-ures p { margin: 4px 0; }
.bsz-reszlet summary { padding: 6px 0; font-weight: 600; cursor: pointer; }
.bsz-tabla { margin-top: 6px; }
.bsz-rendeles-link { margin-left: 0; margin-right: 6px; }

@media (max-width: 640px) {
  .bsz-sor {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "fo fo" "db ar" "muv muv" "kito kito";
  }
  .bsz-muveletek { justify-content: flex-start; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bsz-pult { background: #172554; color: #93c5fd; }
}
:root[data-theme="dark"] .bsz-pult { background: #172554; color: #93c5fd; }

/* --- Telefonos alsó sáv (TERV VR2) -------------------------------------------
   Csak keskeny képernyőn. Rögzítve az alján, egyforma gombok, az ikon alatt a
   felirat — hüvelykujjal is eltalálható (legalább 56 px magas). A gombok
   oszlopai a látható gombokhoz igazodnak: ha egy a csomagon kívül esik (a 🧺 a
   demóban), nem marad utána lyuk. Az oldal alja annyival hosszabb, hogy semmi
   ne kerüljön a sáv mögé, és az iPhone alsó csíkját (safe-area) is kihagyja. */
/* Telefonon a fejléc ikongombjai a Menü panel tetején (app.js, „fejlecElrendez”). */
.nav-mobil-gyors { display: none; }
.csak-menuben { display: none; }
@media (max-width: 700px) {
  .nav-mobil-gyors {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border);
  }
  .nav-mobil-gyors:empty { display: none; }
  .nav-mobil-gyors > .btn { text-align: left; }
  .nav-mobil-gyors .csak-menuben { display: inline; }
  .nav-mobil-gyors .menu-btn { width: 100%; text-align: left; }
  /* A fejléc egy sor: raktár · 🔔 · Menü. A 🔔 (ha van függő rendelés) a Menü elé kerül. */
  .topbar-right { order: 3; flex-basis: auto; margin-left: auto; }
  .nav-doboz { order: 4; margin-left: 0; }
  .raktar-menu .menu-btn { max-width: calc(100vw - 200px); }
}

.also-sav { display: none; }
@media (max-width: 700px) {
  .also-sav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* A 🧺 és az „Új termék” a sávban van: a fejlécben ne álljanak kétszer (így
     a profilgomb is visszafér a sorba). */
  #btn-beszerzendo, #btn-new { display: none; }
  /* Az összesítő telefonon NE ragadjon a lap aljára (Tamás, 2026-10-02): a kis
     képernyő felét elvitte, és az alsó sáv is ott van. A lista végén áll. */
  .raktar-osszeg { position: static; }
}
.also-gomb {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 4px 2px;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.also-gomb:active { background: var(--surface-muted); }
.also-gomb:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.also-ikon { font-size: 22px; line-height: 1; }
.also-jelveny {
  position: absolute; top: 4px; left: calc(50% + 8px);
  min-width: 18px; padding: 1px 5px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 11px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
}

/* --- Bevételezések naplója (N15) --------------------------------------------- */
.bevetelezesek-ablak { width: min(1000px, 96vw); }
.bev-szurok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.bev-szurok label { display: inline-flex; align-items: center; gap: 6px; }
.bev-szurok input[type="search"] { flex: 1 1 220px; min-width: 0; }
.bev-gyors { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bev-sorrend { margin: 0; }
/* minmax(0, 1fr): a táblázat a saját sávjában görögjön, ne szélesítse a sort. */
.bev-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bev-bejegyzes { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; }
.bev-bejegyzes[open] { padding-bottom: 10px; }
.bev-bejegyzes summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; cursor: pointer;
}
.bev-mikor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bev-forras { background: var(--surface-muted); color: var(--text); }
.bev-fej { flex: 1 1 200px; min-width: 0; color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.bev-db { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bev-vissza .bev-db { color: var(--danger); }

/* --- Egyedi árak (X5) --------------------------------------------------------- */
.ea-sav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 6px; }
.ea-sav .field { margin: 0; }
.ea-termek { flex: 1 1 260px; min-width: 0; }
.ea-ar { flex: 0 1 130px; }
.ea-sav input[type=search], .ea-sav select, .ea-sor-ar {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; width: 100%; min-width: 0;
}
.ea-sor-ar { width: 7.5em; text-align: right; }

/* --- Beszerzési árak változása (X1) ------------------------------------------ */
.af-fulek { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.af-ful[aria-selected="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.af-fuldb { font-variant-numeric: tabular-nums; opacity: .85; }
.af-csoportok { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.af-csoport { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.af-csoport:hover { border-color: var(--primary); }
.af-valtozas { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.af-dragult { color: var(--danger); }
.af-olcsobb { color: var(--success); }
.af-figyel { color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.af-tabla td { vertical-align: top; }
.af-muvelet { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* --- Számla rendelés nélkül, számlázó-mód (A6) ------------------------------- */
.osz-mod { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-bg); }
.osz-uj { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px 12px; }
.osz-uj > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.osz-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.osz-racs .field { margin-bottom: 10px; }
.osz-szeles { grid-column: 1 / -1; }
/* A tételsor mezői és a dátum/legördülő ugyanúgy néznek ki, mint az űrlap többi mezője (.field input). */
.osz-tetelek input, .osz-tetelek select, .osz-racs input[type=date], .osz-racs input[type=month], .osz-racs input[type=number],
.osz-racs select, .osz-uj input[type=search] {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; width: 100%; min-width: 0;
}
.osz-racs input[type=date], .osz-racs input[type=month], .osz-racs input[type=number], .osz-racs select { padding: 8px 10px; font-size: 16px; }
/* Gyűjtőszámla (X8): a vevő számlázási adatai és a kijelöltek összege. */
.osz-racs .gy-honap-mezo { grid-column: span 2; max-width: 360px; }
.gy-vevoadat { margin: 12px 0 10px; }
.gy-osszegzes { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
/* Gyári számok (X3): kereső, a szűrés címkéje, a darabok táblája. */
.gsz-kereso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.gsz-kereso input[type=search] {
  flex: 1 1 260px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 16px;
}
.gsz-szuro { padding: 3px 10px; border-radius: 999px; background: var(--accent-bg); border: 1px solid var(--accent-border); font-size: 13px; }
.gsz-gombok { justify-content: flex-start; margin: 0 0 10px; }
#gyariszam-dialog .osz-uj { margin: 0 0 10px; }
#gyariszam-dialog textarea { width: 100%; font-family: inherit; }
.gsz-tabla td { vertical-align: top; }
/* A gyári szám egyben olvasható (és másolható) — ne törjön a kötőjelnél. */
.gsz-tabla td:first-child { white-space: nowrap; }
.gsz-tabla td > div + div { margin-top: 4px; }
.osz-tetelek .osz-t-nev { min-width: 160px; }
.osz-tetelek .osz-t-menny { width: 5.5em; }
.osz-tetelek .osz-t-egyseg { width: 4.5em; }
.osz-tetelek .osz-t-ar { width: 8em; }
.osz-gombok { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.osz-alcim { margin: 18px 0 8px; font-size: 1rem; }
.osz-muvelet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.osz-sztornozott td:not(.osz-muvelet) { color: var(--text-muted); text-decoration: line-through; }

/* --- Ki mit módosított (X10) ------------------------------------------------- */
.mod-ki { background: var(--surface-muted); color: var(--text); }
.mod-ki-program { background: var(--accent-bg); border: 1px solid var(--accent-border); }
.mod-ki-rendszer, .mod-ki-kivulrol { font-style: italic; }
.mod-tetelek { display: grid; gap: 8px; }
.mod-tetel { padding: 6px 0; border-top: 1px dashed var(--border); }
.mod-tetel:first-child { border-top: 0; }
.mod-tetel-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.mod-mu { color: var(--text-muted); font-size: 13px; }
.mod-mu-torles, .mod-mu-vegleges_torles { color: var(--danger); }
.mod-mezok { margin: 4px 0 0; padding-left: 1.2rem; display: grid; gap: 2px; font-size: 14px; }
.mod-mezok li { overflow-wrap: anywhere; }
.mod-mezo { color: var(--text-muted); }
.mod-mezo::after { content: ':'; }
.mod-elotte { text-decoration: line-through; color: var(--text-muted); }
.mod-utana { font-weight: 600; }
.mod-uj { color: var(--success, var(--text)); font-weight: 600; }
.mod-el { color: var(--danger); font-weight: 600; }
.mod-rekord { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 600; }
.mod-tovabb { margin: 10px 0 0; }

/* --- Szkenner-figyelő használata (N16) --------------------------------------- */
.szf-blokk { margin-top: 22px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.szf-blokk summary { cursor: pointer; font-weight: 600; }
.szf-lepesek { display: grid; gap: 8px; margin: 12px 0 8px; padding-left: 1.3rem; }
.szf-lepesek .btn { margin: 4px 6px 4px 0; }
.szf-allapot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.szf-jelzo { flex: 1 1 260px; font-weight: 600; }
.szf-nem-jelentkezik { color: var(--danger); }

/* --- Kézi bevételezés --------------------------------------------------------- */
.kezi-bev-ablak { width: min(860px, 96vw); }
.kb-fej { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.kb-fej label { display: grid; gap: 4px; font-weight: 500; }
.kb-fej label[hidden] { display: none; }
.kb-tabla { margin-top: 10px; }
.kb-tabla input[type="number"] { width: 90px; text-align: right; }
.bsz-igeny { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.bsz-olcsobb { margin-top: 4px; font-size: 13px; }
.bsz-olcsobb .link-gomb { margin-left: 6px; }
.bsz-aktiv { border-color: var(--primary); background: var(--surface-muted); }

/* --- Kalkulátor (X19) ------------------------------------------------------------
   Lapok: nagy képernyőn tördelve, telefonon egy sorban, oldalra görgetve. A
   számológép billentyűi hüvelykujjnyiak; az eredmény a legnagyobb szám a lapon. */
.kalk-ablak { width: min(760px, 96vw); }
.kalk-fulek { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kalk-ful {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.kalk-ful:hover { border-color: var(--primary); }
.kalk-ful[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.kalk-ful:focus-visible, .kalk-gomb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kalk-sor { display: flex; gap: 6px; align-items: center; }
.kalk-sor input { flex: 1 1 auto; min-width: 0; }
.kalk-sor select { flex: 0 0 auto; width: auto; padding: 8px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; }
.kalk-alcim { margin: 20px 0 8px; font-size: 1rem; }
.kalk-alcim.kalk-elso { margin-top: 0; }
.kalk-eredmeny { margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.kalk-eredmeny:empty { display: none; }
.kalk-fo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; padding: 10px 14px;
  border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-bg);
}
.kalk-fo > span { color: var(--text-muted); font-weight: 600; }
.kalk-fo > strong { font-size: 1.6rem; line-height: 1.2; }
.kalk-fo > small { color: var(--text-muted); }
.kalk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.kalk-dl dt { color: var(--text-muted); }
.kalk-dl dd { margin: 0; font-weight: 600; }
.kalk-dl-nagy dd { font-size: 1.15rem; }
.kalk-negativ { color: var(--danger); }
.kalk-figyel { margin: 6px 0; color: var(--danger); font-weight: 600; }
.kalk-mondat { margin: 4px 0; }
.kalk-atvesz { margin: 0 0 12px; }
.kalk-ar-gomb { align-self: flex-start; margin-top: 6px; }
.kalk-tabla .szam-cella { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kalk-kereso { width: 100%; max-width: 320px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 16px; }
.kalk-gyors { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.kalk-gyors:empty { display: none; }
.kalk-cimletek { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.kalk-cimlet { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; }

/* Számológép: kijelző, eredmény, 4 oszlopos billentyűzet. */
.kalk-szamologep { max-width: 360px; }
.kalk-kijelzo {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 18px; text-align: right; font-variant-numeric: tabular-nums;
}
.kalk-nagy {
  margin: 6px 0 10px; font-size: 2rem; font-weight: 700; text-align: right; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.kalk-nagy.kalk-hibas { font-size: 1rem; font-weight: 600; color: var(--danger); }
.kalk-billentyuk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kalk-gomb {
  min-height: 48px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 20px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.kalk-gomb:hover { background: var(--surface-muted); }
.kalk-gomb:active { transform: translateY(1px); }
.kalk-gomb-muv { background: var(--accent-bg); border-color: var(--accent-border); }
.kalk-gomb-mas { font-size: 15px; color: var(--text-muted); }
.kalk-gomb-egyenlo { grid-column: span 2; background: var(--primary); border-color: var(--primary); color: #fff; }
.kalk-gomb-egyenlo:hover { background: var(--primary-hover); }
.kalk-szalag { display: flex; flex-direction: column; gap: 2px; max-width: 360px; }
.kalk-szalag-sor {
  display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kalk-szalag-sor:hover { background: var(--surface-muted); }
.kalk-szalag-sor span { color: var(--text-muted); overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .kalk-fulek { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .kalk-szamologep, .kalk-szalag { max-width: none; }
  .kalk-gomb { min-height: 54px; }
}

/* --- Vevőből portálfiók (PF1–PF3) --------------------------------------------- */
.vasarlo-muvelet { white-space: nowrap; }
.vasarlo-muvelet .btn-small, .vasarlo-portal { margin-right: 6px; }
.pf-ablak { width: min(480px, 94vw); }
.pf-ablak .field { margin-bottom: 10px; }
.pf-vevo { margin: 0 0 12px; font-weight: 600; }
.pf-level { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 6px; font-size: 14px; }
.pf-kesz p { margin: 0 0 8px; }
.pf-link { display: flex; gap: 6px; }
.pf-link input { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

/* --- A levelezés beállítása (BE4) ----------------------------------------------- */
.levelezes-sav { background: #92400e; }
.lv-ablak { width: min(720px, 96vw); }
.lv-allapot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); font-weight: 600; }
.lv-jo { color: var(--success); }
.lv-rossz { color: var(--danger); }
.lv-semleges { color: var(--text-muted); }
.lv-blokk { margin: 12px 0 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.lv-blokk legend { padding: 0 6px; font-weight: 600; }
.lv-blokk .osz-racs input[type=text], .lv-blokk .osz-racs input[type=password] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 16px; width: 100%; min-width: 0; }
.lv-gombok { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* --- Reklamáció (J6 + J8) ------------------------------------------------------- */
.rk-szakasz { margin: 14px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.rk-alcim { margin: 0 0 8px; font-size: 1rem; }
.rk-kepek-sav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.rk-kepek { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-kepek:empty { display: none; }
.rk-kep { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.rk-kep img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.rk-kep .rk-kep-torol { position: absolute; top: -6px; right: -6px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 22px; height: 22px; font-size: 11px; line-height: 1; }
.rk-kep-fuggo { padding: 4px 26px 4px 8px; border: 1px dashed var(--border); border-radius: 6px; font-size: 13px; }
.rk-kep-gomb { cursor: pointer; }
.rk-dontes-kesz { padding: 8px 10px; border-radius: 6px; background: var(--surface-muted); margin-bottom: 4px; }
.rk-cimke { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-cimke.rk-hamar { border-color: #d97706; color: #d97706; font-weight: 600; }
.rk-cimke.rk-lejart { border-color: var(--danger); color: var(--danger); font-weight: 600; }
.rk-cimke.rk-eldontve { background: var(--surface-muted); }
.rk-portal { cursor: help; }

/* --- „Mire készülj” doboz (4. szakasz) --------------------------------------------- */
.mk-doboz { margin: 0 0 14px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-bg); }
.mk-doboz > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.mk-lista { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; }
.mk-sor { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mk-sor:hover { border-color: var(--primary); }
.mk-sor:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.mk-sor.mk-surgos { border-left: 4px solid var(--danger); }
.mk-nyil { color: var(--text-muted); font-size: 18px; line-height: 1; }

/* --- A közös bemutató sávja (K15) ------------------------------------------------------ */
#bemutato-sav { position: sticky; top: 0; z-index: 61; display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; padding: 8px 14px; background: #1d4ed8; color: #fff; font-size: 13.5px; line-height: 1.4; text-align: center; }
#bemutato-sav[hidden] { display: none; }
#bemutato-sav a { color: #fff; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .45); text-decoration: none; font-weight: 600; }
#bemutato-sav a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* A termékablakban, ami a bemutatóban nem szerkeszthető, halványan — hogy rögtön látszódjon. */
.bemutato-mod #product-form :disabled { opacity: .45; cursor: not-allowed; }