* { 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); }
.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; } }
.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; }
.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; }

/* --- 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); }

/* --- 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; }