/* Sales OS -- SHELL (4. hullam, 2026-10-07): Beallitasok fulsor, kezdo lepesek, bemutato tura, belepo kepernyo
 * kiegeszitesei, maszkolt kulcsok. Csak a sales.css tokenjeit hasznalja (vilagos / sotet mod onmukodo). */

/* ── RENDSZERSZÍN: Sales OS (Péter, 2026-10-08) ─────────────────────────────────────────────────
 * Minden OS önálló rendszer a saját színével (docs/OS-RENDSZEREK.md; az OS-központ :3424 színkódjai). A Sales OS
 * kiemelő színe a rózsaszínes #BE4A5D (ikon-gradiens #E4808F -> #BE4A5D); a közös /css/tokens.css narancs
 * --color-primary családját itt, CSAK a Sales OS alkalmazásban (index.html tölti ezt a fájlt) írjuk felül, a Supply OS
 * tokenfájljához nem nyúlunk. A partneroldal (offer.html) a cég arculatát viseli, oda ez a fájl nem töltődik.
 * A szelektorok a tokens.css-ével azonosak, így a világos / rendszer-sötét / kézi sötét mód mind a három ágban nyer. */
:root {
  --color-primary:        #BE4A5D;
  --color-primary-hover:  #A63C4F;
  --color-primary-active: #8E3243;
  --color-primary-subtle: #FCE8EB;
  --sys-accent-a: #E4808F; --sys-accent-b: #BE4A5D;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:        #E4808F;
    --color-primary-hover:  #EC9AA6;
    --color-primary-active: #D06A7B;
    --color-primary-subtle: #3A1820;
  }
}
:root[data-theme="dark"] {
  --color-primary:        #E4808F;
  --color-primary-hover:  #EC9AA6;
  --color-primary-active: #D06A7B;
  --color-primary-subtle: #3A1820;
}

/* Beallitasok fulsor (Ugyintezok · Cimkek · Integraciok · Cegbeallitasok) */
.sh-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; width: fit-content; max-width: 100%; }
.sh-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.sh-tabs a:hover { color: var(--text); background: var(--surface); }
.sh-tabs a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08)); }

/* Kezdo lepesek */
.sh-ob { display: flex; flex-direction: column; gap: 14px; }
.sh-ob-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sh-ob-h .bar { flex: 1 1 100%; height: 7px; }
.sh-ob-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-ob-l li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.sh-ob-l li:last-child { border-bottom: 0; }
.sh-ob-l .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-3); color: var(--text-3); }
.sh-ob-l li.ok .ck { background: var(--ok); color: #fff; }
.sh-ob-l li.ok b { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.sh-ob-l .grow { min-width: 0; display: flex; flex-direction: column; }
.sh-ob-l .h { font-size: 11.5px; color: var(--text-3); }

/* Bemutato tura */
.sh-tour { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.sh-tour-box { position: fixed; pointer-events: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.18)); display: flex; flex-direction: column; gap: 6px; }
.sh-tour-box h2 { margin: 0; font-size: 15px; }
.sh-tour-box p { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.sh-tour-box .row { display: flex; align-items: center; gap: 6px; }
.sh-tour-box .sp { flex: 1; }
.sh-tour-on { outline: 3px solid var(--primary) !important; outline-offset: 3px; border-radius: 8px; position: relative; z-index: 120; }

/* Belepo kepernyo: nyelvvalto + hozzaferes-keres */
.login .lhead .lang-sw { margin-top: 2px; }
.login .lacc { margin: 4px 0 0; text-align: center; font-size: 12.5px; }

/* Maszkolt kulcsok, bankszamlak */
.sh-sec { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sh-sec:last-of-type { border-bottom: 0; }
.sh-sec .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-sec .h { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.sh-sec .grow > .pill { align-self: flex-start; } /* SHELL E2E: az allapot-jelveny ne nyuljon a teljes sorra */
#sh-ext .h { font-size: 11.5px; color: var(--text-3); } /* SHELL E2E: Kulso keszletoldal -- a sugo-sor kisbetus, mint mashol */
.sh-logins summary { cursor: pointer; font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* SHELL E2E: Cegbeallitasok "Kulcs es Gmail-cim ertekesitonkent" -- a Gmail-mezo sajat oszlopot kap (eddig a 3 oszlopos
   racsban egy betunyi szelessegre tort a kovetkezo sorba). Keskeny kepernyon a mezo a sor teljes szelesseget kapja. */
.urate { grid-template-columns: 26px minmax(0, 1fr) 96px minmax(150px, 220px); }
.urate > input[type="email"] { max-width: none !important; width: 100%; }
@media (max-width: 760px) {
  .urate { grid-template-columns: 26px minmax(0, 1fr) 96px; }
  .urate > input[type="email"] { grid-column: 2 / -1; }
}
.sh-logins ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }

@media (max-width: 600px) {
  .sh-tabs { width: 100%; }
  .sh-tabs a { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
  .sh-sec { flex-wrap: wrap; }
  .sh-tour-box { left: 12px !important; right: 12px; width: auto !important; }
}

/* ══ MOBIL NÉZET (MOB-SHELL, 2026-10-08) — Péter Supply OS mobil-grafikája szerint ══════════════════════════════
 * A minta: docs/aura-supply-os/mobil/supply-os-mobil-grafika.jpg; a Supply OS párja: css/shell-extra.css "MOBIL NÉZET".
 * SZERZŐDÉS a nézeteknek (MOB-SALES, MOB-DATA és a többi): a telefonos határ ≤767px; --mob-tabbar-h (64px) és
 * --mob-also (a sáv + a biztonsági sáv alul); az alsó sáv .mob-tabbar (position: fixed, z-index 100); a fiók (.side)
 * BALRÓL nyílik (z 120, háttér 110); a modál (.ov > .modal) és a drawer (.drawer) alulról nyíló, teljes szélességű
 * lap, max 92dvh, a fejléc és a gombsor mindig látszik, a törzs görget; a toast az alsó sáv FÖLÖTT; a tartalom alján
 * calc(var(--mob-also) + 24px) hely; ragadós alsó műveletsáv: bottom: var(--mob-also). Segédosztályok: .mob-only
 * (csak telefonon), table.mob-cards (táblázat -> kártyalista; a cellák címkéjét az app.js a fejlécből adja: data-l),
 * .mob-scroll (egy sorban, oldalra görgethető sáv). Asztalon (≥768px) ebből a szakaszból CSAK a két első sor hat
 * (rejtett .mob-only és .mob-tabbar) -- a keret ott változatlan. */
.mob-only { display: none !important; }
.mob-tabbar { display: none; }

@media (max-width: 767px) {
  :root { --mob-tabbar-h: 64px; --mob-also: calc(var(--mob-tabbar-h) + env(safe-area-inset-bottom, 0px)); --mob-top-h: 56px; --mob-safe-top: env(safe-area-inset-top, 0px); }

  /* ── FEJLÉC: cég · kereső-ikon · csengő · hamburger (a grafika sorrendje); minden más a fiókban ───────── */
  .top { height: calc(var(--mob-top-h) + var(--mob-safe-top)); padding: var(--mob-safe-top) 4px 0 12px; gap: 0; }
  .top .mob-brand { display: flex !important; flex: 1 1 auto; min-width: 0; min-height: 44px; align-items: center; gap: 10px; padding: 4px 6px 4px 0; text-decoration: none; color: var(--text); }
  .mob-brand .logo { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
  .mob-brand .mb-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .mob-brand .mb-t b { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-brand .mb-t small { font-size: 11.5px; color: var(--muted); }
  .top .ib { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--text); }
  .top .ib:hover, .top .ib[aria-expanded="true"] { background: var(--surface-2); }
  .top .ib svg { width: 22px; height: 22px; }
  .top .ib .badge-n { top: 3px; right: 3px; min-width: 19px; height: 19px; border-radius: 10px; font-size: 11px; border: 2px solid var(--surface); }
  .top .ms-btn { display: grid !important; order: 1; }
  .top .top-r { order: 2; margin-left: 0; gap: 0; flex: 0 0 auto; }
  .top .ib.hamb { display: grid; order: 3; }
  .top-r .shop, .top-r .lang-sw, .top-r [data-shell="theme"], .top-r .user { display: none !important; }
  /* A kereső a sáv FÖLÉ nyílik, teljes szélességben, bezáró gombbal; a találati lista teljes szélességű. */
  .top .gsearch { display: none; }
  .top.ms-open .gsearch { display: flex; align-items: center; gap: 4px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: var(--mob-top-h); max-width: none; padding: 0 4px 0 12px; background: var(--surface); }
  .top.ms-open .gsearch .search { flex: 1 1 auto; height: 44px; border-radius: 12px; }
  .top.ms-open .gs-x { display: grid !important; flex: 0 0 auto; }
  .search kbd, .top .search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
  .pop.gres-pop { left: 0 !important; right: 0 !important; top: calc(var(--mob-top-h) + var(--mob-safe-top)) !important; padding: 0 8px; }
  .pop.gres-pop, .pop.nt-sheet { box-shadow: 0 0 0 100vmax rgba(10, 8, 6, .45); clip-path: inset(0 -100vmax -100vmax -100vmax); } /* a lap alatti tartalom elsotetul, a fejlec nem */
  .pop.gres-pop > .menu { width: auto !important; max-height: calc(100dvh - var(--mob-top-h) - var(--mob-safe-top) - var(--mob-also) - 12px) !important; border-radius: 0 0 16px 16px; }
  /* Csengő-panel: teljes szélességű lap a fejléc alatt (a két fül és a lista a saját görgetésével). */
  .pop.nt-sheet { left: 0 !important; right: 0 !important; top: calc(var(--mob-top-h) + var(--mob-safe-top)) !important; }
  .pop.nt-sheet .nt-pop { width: 100%; max-width: none; border-radius: 0 0 18px 18px; border-left: 0; border-right: 0; }
  .pop.nt-sheet .nt-l { max-height: calc(100dvh - var(--mob-top-h) - var(--mob-safe-top) - var(--mob-also) - 72px); }

  /* ── FIÓK: a teljes menü BALRÓL (Péter döntése a Supply OS-ben), alján a felhasználó és a beállítások ─────── */
  .side { width: min(300px, 86vw); z-index: 120; padding: calc(12px + var(--mob-safe-top)) 10px 0; gap: 8px; transform: translateX(-105%); box-shadow: none; overscroll-behavior: contain; }
  body.nav-open { overflow: hidden; }
  body.nav-open .side { transform: none; box-shadow: 12px 0 40px rgba(0, 0, 0, .35); }
  body.nav-open .side-bd { z-index: 110; background: rgba(10, 8, 6, .55); }
  .side .brand { min-height: 44px; }
  .side .nav { min-height: 46px; padding: 0 12px; gap: 12px; font-size: 15px; }
  .side .nav svg { width: 20px; height: 20px; }
  .side .nav .cnt { font-size: 12px; } .side .nav .dot { font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; }
  .nav-g > small { font-size: 11px; padding: 10px 12px 4px; }
  .side .side-acc { display: flex !important; flex-direction: column; gap: 2px; margin-top: auto; padding: 10px 0 4px; border-top: 1px solid var(--border); }
  .side-acc .sa-who { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px; border-radius: 12px; text-decoration: none; color: var(--text); }
  .side-acc .sa-who:hover { background: var(--surface-2); }
  .side-acc .sa-who .av { width: 38px; height: 38px; font-size: 13px; }
  .side-acc .sa-wt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
  .side-acc .sa-wt b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-acc .sa-wt span, .side-acc .sa-wt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-acc .sa-who > svg { color: var(--muted); flex: 0 0 auto; }
  .side-acc .sa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 8px 0 12px; font-size: 14px; color: var(--text-2); }
  .side-acc .sa-row .seg button { min-height: 40px; padding: 0 11px; font-size: 13px; }
  .side-acc .sa-i { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font-size: 15px; text-align: left; text-decoration: none; }
  .side-acc .sa-i:hover { background: var(--surface-2); }
  .side-acc .sa-i > svg { color: var(--muted); }
  .side-acc .sa-i > span { flex: 1 1 auto; min-width: 0; }
  .side-acc .sa-i small { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .side-acc .sa-out, .side-acc .sa-out > svg { color: var(--bad); }
  .side .side-foot { margin-top: 0; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .side .side-foot .link { display: none; }

  /* ── ALSÓ SÁV: 5 pont, ikon + felirat; az aktív narancs ikon-kapszulával és halvány fénnyel ───────────────── */
  .mob-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: var(--mob-also); padding: 0 4px env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0, 0, 0, .14); }
  .mob-tab { flex: 1 1 0; min-width: 0; height: var(--mob-tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--text-2); font: 500 11px/1.2 var(--font-ui); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .mob-tab:hover { color: var(--text); }
  .mob-tab-ikon { position: relative; width: 48px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background var(--motion-fast); }
  .mob-tab-cimke { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-tab.on { color: var(--primary); font-weight: 600; }
  .mob-tab.on .mob-tab-ikon { background: var(--primary-subtle); box-shadow: 0 0 18px var(--primary-subtle); }
  .mob-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: 12px; }
  .mob-tab-n { position: absolute; top: -3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; border: 2px solid var(--surface); }

  /* ── TARTALOM: 16px oldal-padding, cím 24px, a gombsor a cím ALATT; az alsó sáv alá nem csúszik semmi ──── */
  .content { padding: 16px 16px calc(var(--mob-also) + 24px); gap: 14px; }
  .view { gap: 14px; }
  .page-h { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; } /* nowrap: tordelo oszlopban a sor a leghosszabb elem max-content szelesseget kapna */
  .page-h h1 { font-size: 24px; line-height: 1.2; }
  .page-h .act { margin-left: 0; width: 100%; }
  .mob-scroll { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .mob-scroll::-webkit-scrollbar { display: none; }
  .mob-scroll > * { flex: 0 0 auto; }
  /* .mob-snap: beugro gorgetes -- nyugalomban a bal szelen mindig EGESZ elem all (scroll-padding = a sor 16px-es
     belso margoja); ha jobbra van meg tartalom, a sor jobb szele halvanyul (data-more: app.js mobScrollActive). */
  .mob-snap { scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
  .mob-snap > *, .mob-snap > .chips > *, .mob-snap > .seg { scroll-snap-align: start; }
  /* a sor bal 16px-es margoja (a lap belso margoja) mindig takart: gorgetve se latszodjon ott elem-szelet */
  .mob-snap { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 16px); mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 16px); }
  .mob-snap[data-more] { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 16px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 16px, #000 calc(100% - 44px), transparent 100%); }
  /* A kartya-fejlec jobb oldala (pl. penznem-valto): ha nem fer ki, a sajat soran oldalra gorget, nem tolja ki a lapot. */
  .card-h > .r { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .card-h > .r::-webkit-scrollbar { display: none; }
  .toasts { top: auto; left: 12px; right: 12px; bottom: calc(var(--mob-also) + 12px); max-width: none; }

  /* ── MODÁL ÉS DRAWER: alulról nyíló, teljes szélességű lap ────────────────────────────────────────────── */
  .ov { place-items: end stretch; padding: 0; }
  .modal, .modal.lg, .modal.sm { width: 100%; max-width: none; max-height: 92dvh; overflow: hidden; border-radius: 18px 18px 0 0; border-bottom: 0; animation: mobSheetIn .2s ease-out; }
  .modal-h, .dw-h { position: relative; flex: 0 0 auto; min-height: 56px; padding: 14px 6px 8px 16px; }
  .modal-h::before, .dw-h::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .modal-h h2, .dw-h h2 { font-size: 16px; }
  .modal-h .ic-btn, .dw-h .ic-btn { width: 44px; height: 44px; }
  .modal-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .modal-f { flex: 0 0 auto; border-radius: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .modal-f > .btn { flex: 1 1 auto; }
  .dw-ov { background: color-mix(in srgb, #000 45%, transparent); }
  .drawer, .drawer.wide { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: mobSheetIn .22s ease-out; }
  .dw-b { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }

  /* ── ŰRLAP ÉS ÉRINTÉS: 16px betű (iOS ne nagyítson), minden érinthető elem legalább 40×40 (inkább 44) ──── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  .input { height: 44px; } .input-sm { height: 40px; } textarea.input { height: auto; }
  .search { height: 44px; }
  .btn { min-height: 44px; } .btn-sm { min-height: 40px; padding: 0 12px; font-size: 13px; }
  .chip { height: 40px; padding: 0 14px; font-size: 13px; }
  .seg button { min-height: 40px; padding: 0 12px; font-size: 13px; }
  .ic-btn { min-width: 40px; min-height: 40px; }
  .pg { min-width: 40px; height: 40px; }
  .tabs button { min-height: 44px; padding: 0 12px; font-size: 13.5px; }
  .menu-i { min-height: 44px; font-size: 14px; }
  .link { min-height: 40px; }
  .swatch { width: 40px; height: 40px; }
  .chk-l, .ck { min-height: 40px; align-items: center; }
  /* V2-SHELL E2E (2026-10-09): a Profil Gmail-kártyájának naptár-jelölője is 40 px-es érintési felület (390 px-en 36 px volt). */
  .g-cal { min-height: 40px; display: flex; align-items: center; gap: 7px; }
  /* Kapcsoló: az érintési felület 48×40, a látható kapszula (::before) 48×26 a közepén, a gomb (::after) fölötte. */
  .toggle { width: 48px; height: 40px; padding: 0; border: 0; border-radius: 13px; background: transparent !important; }
  .toggle::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 26px; border-radius: 13px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); transition: background var(--motion-fast); }
  .toggle[aria-checked="true"]::before, .toggle.on::before { background: var(--primary); box-shadow: none; }
  .toggle::after { top: 10px; left: 3px; width: 20px; height: 20px; z-index: 1; }
  .toggle[aria-checked="true"]::after, .toggle.on::after { left: 25px; }

  /* ── OLVASHATÓSÁG: közös komponensek 11px alatti felirata telefonon legalább 11px ─────────────────────── */
  .tbl th, .tbl.tight th, .field > label, .field > .lbl, .menu-h, .hd, .idc small, .tbl tfoot td small, .br small, .ekv > .lbl,
  .src2, .dpl small, .src-t b, .dsum > div, .tile, .med-i .htag, .cnt-b, .nav .dot, .ib .badge-n, .e-te, .e-rk, .e-lh,
  .e-cr > small, .e-cri .mono, .sparks text, .gres .menu-h, .e-upd { font-size: 11px; }
  .tbl.tight td { font-size: 12.5px; }

  /* ── KPI-KÁRTYÁK 2 oszlopban (a grafika 5. pontja): nagybetűs címke + ikon-kör jobbra, alatta a nagy szám ── */
  .kpis, .kpis.k3, .kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi, .kpis.k5 .kpi { display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "l ico" "v v" "s s" "f f"; align-items: start; gap: 2px 8px; padding: 14px 14px 12px; }
  .kpi .kb { display: contents; }
  .kpi .ico, .kpis.k5 .kpi .ico, .kpi.compact .ico { grid-area: ico; width: 40px; height: 40px; }
  .kpi .ico svg { width: 19px; height: 19px; }
  .kpi .l { grid-area: l; align-self: center; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
  .kpi .v, .kpis.k5 .kpi .v, .kpi.compact .v { grid-area: v; margin-top: 6px; font-size: 24px; }
  .kpi .v small { font-size: 13px; }
  .kpi .s { grid-area: s; margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
  .kpi::after { left: 14px; right: 14px; }
  .kpis > :only-child, .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ── TÁBLÁZAT -> KÁRTYALISTA (segédosztály: table.mob-cards; a cella címkéje a data-l) ──────────────────── */
  .tw:has(> table.mob-cards) { overflow: visible; }
  table.mob-cards, table.mob-cards tbody, table.mob-cards tfoot { display: block; width: 100%; }
  table.mob-cards thead { display: none; }
  table.mob-cards tr { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  table.mob-cards td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 0; border: 0; text-align: right; overflow-wrap: anywhere; font-size: 13.5px; }
  table.mob-cards td::before { content: attr(data-l); flex: 0 0 auto; max-width: 45%; text-align: left; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
  table.mob-cards td[data-l=""]::before, table.mob-cards td.mc-t::before { content: none; }
  table.mob-cards td.mc-t { order: -1; justify-content: flex-start; text-align: left; font-size: 15px; font-weight: 600; }
  table.mob-cards td:empty { display: none; }
}
@keyframes mobSheetIn { from { transform: translateY(28px); opacity: 0; } }
/* MOB-SHELL: erintessel / egerrel nyitott reteg kezdo fokusza gyuru nelkul (S.softFocus); billentyure visszajon. */
.pf-noring:focus, .pf-noring:focus-visible { outline: none; }

/* MOB-SHELL (2026-10-08): a keret telefonos kiegészítései -- bemutató túra kártyája, Beállítások fülsor, a nézetekben
 * inline megadott 10-10,5px-es apró feliratok (telefonon legalább 11px). */
@media (max-width: 767px) {
  .sh-tour-box.sh-tour-mob { left: 12px !important; right: 12px; width: auto !important; padding: 16px; border-radius: 16px; }
  .sh-tour-box.sh-tour-mob h2 { font-size: 17px; }
  .sh-tour-box.sh-tour-mob p { font-size: 14px; }
  .sh-tour-box small { font-size: 11.5px; }
  .sh-tabs { display: flex; flex-wrap: nowrap; width: auto; max-width: none; margin: 0 -16px 4px; padding: 0 16px; border: 0; border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .sh-tabs::-webkit-scrollbar { display: none; }
  .sh-tabs a { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13.5px; }
  .sh-tabs a.on { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); box-shadow: none; }
  #view [style*="font-size:10.5px"], #view [style*="font-size: 10.5px"], #view [style*="font-size:10px"], #view [style*="font-size: 10px"], #view [style*="font-size:9.5px"] { font-size: 11px !important; }
  .sh-ob-l li { min-height: 56px; }
  small { font-size: max(11px, .833em); } /* a csupasz <small> (szulo 11,5px -> 9,6px) telefonon legalabb 11px */
  .pop .nt-i time { font-size: 11px; } /* a leads.css / reports.css a shell.css UTAN tolt: nagyobb specificitas kell */
  #view .rp-svg .rp-ax, #view .rp-br .rp-hv small { font-size: 11px; }
  .sh-logins summary { display: flex; align-items: center; min-height: 40px; font-size: 13px; }
  .med-i { min-height: 48px; font-size: 14.5px; }
  .med-i .gr { width: 40px; height: 40px; }
  .sh-ob-l .h { font-size: 12px; }
  .login-wrap { padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px)); align-items: start; }
  .login { max-width: 420px; padding: 24px 18px 18px; gap: 14px; margin-top: 4vh; }
  .login p, .lfoot { font-size: 12.5px; }
  .login .lacc .link { min-height: 44px; font-size: 14px; }
  .login .lang-sw button { min-height: 40px; min-width: 44px; }
  .gbtn { height: 48px; font-size: 15px; }
  .login .btn-p { height: 48px; font-size: 15px; }
}

/* MOB-SHELL (2026-10-08): Jutalékom -- a jutalék-táblázat telefonon kártyalista (table.mob-cards); a rendelésszám a
 * kártya címe, az összesítő sorok (colspan) a saját címükkel. */
@media (max-width: 767px) {
  table.cm-tbl.mob-cards td.idc { order: -1; justify-content: flex-start; font-size: 14px; }
  table.cm-tbl.mob-cards td.idc::before { content: none; }
  table.cm-tbl.mob-cards td[colspan] { display: block; text-align: left; font-weight: 600; font-size: 13.5px; }
  table.cm-tbl.mob-cards td[colspan]::before { content: none; }
  table.cm-tbl.mob-cards td[colspan] small { display: block; font-weight: 400; color: var(--muted); }
  table.cm-tbl.mob-cards tfoot tr { background: var(--surface-2); }
  table.cm-tbl.mob-cards tfoot td { background: transparent; border-top: 0; }
  table.cm-tbl.mob-cards td.jt small { display: inline; margin-left: 6px; font-size: 11px; }
  table.cm-tbl.mob-cards td .btn { min-height: 40px; }
  .rank { min-height: 44px; }
}

/* MOB-SHELL (2026-10-08): Riportok -- a sok számoszlopos táblázat telefonon a kártyán belül oldalra görget, az első
 * (megnevező) oszlop rögzítve marad; Profil menü-szerkesztő: a „vezetői jog kell” címke egy sorban. */
@media (max-width: 767px) {
  .rp-tbl th:first-child, .rp-tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
  .rp-tbl thead th:first-child { background: var(--surface-2); }
  .rp-tbl tfoot td:first-child { background: var(--surface-2); }
  .med-i .htag { white-space: nowrap; }
  .med-i .nm { flex-wrap: wrap; row-gap: 3px; } /* a címke a név alá törik, nem fut a szem-gombra (overlap-mérés) */
}

/* MOB-SHELL (2026-10-08): Ügyintézők -- a lista telefonon kártyák (név + e-mail a kártya címe, alatta pozíció, telefon,
 * aláírás-nyelvek, a Szerkesztés gomb a kártya alján teljes szélességben). */
@media (max-width: 767px) {
  table.st-tbl.mob-cards td:first-child { order: -1; justify-content: flex-start; text-align: left; }
  table.st-tbl.mob-cards td:first-child::before { content: none; }
  table.st-tbl.mob-cards td:first-child .two b { font-size: 15px; }
  table.st-tbl.mob-cards td:last-child { justify-content: stretch; margin-top: 4px; }
  table.st-tbl.mob-cards td:last-child .btn { flex: 1 1 auto; }
  table.st-tbl.mob-cards td .tag { font-size: 11.5px; }
}

/* RENDSZER-IKON (2026-10-08): a .logo negyzet helyett a Sales OS ikonja (S.OS_ICON), hatter nelkul -- mint az OS-kozpontban. */
.logo.os-logo { background: transparent; box-shadow: none; padding: 1px; }
.logo.os-logo svg { width: 100%; height: 100%; display: block; }

/* F3a (2026-10-09): "Supply OS nem érhető el" sav a lap tetején (views/supply.js) */
.supply-banner { margin: 10px 24px 0; }
@media (max-width: 767px) { .supply-banner { margin: 8px 12px 0; } }

/* ══ LOGIN-UI (2026-10-21, felhasznaloi makett): belepo kepernyo -- rozsaszin, uveges kartya, hullam-motivum.
 * Vilagos es sotet valtozat; a tema-valasztast koveti (theme.js: data-theme, ures = prefers-color-scheme).
 * A markup: app.js showLogin / showNoAccess / showBootError (.login-wrap.lgn > .login.lgn-page > .lhead + .lgn-card).
 * A nyelvvalto (.lgn-lang) jobb fent, a kartyan kivul; a .login osztaly a kulso dobozon marad (e2e: .login .lang-sw). */
.lgn {
  --lg-bg: #FDF5F7; --lg-glow1: rgba(248, 178, 198, .55); --lg-glow2: rgba(240, 130, 164, .30);
  --lg-text: #1E1A1D; --lg-muted: #6E6368; --lg-label: #4D4247;
  --lg-card: rgba(255, 255, 255, .62); --lg-card-bd: rgba(228, 150, 174, .38);
  --lg-card-sh: 0 28px 64px -28px rgba(214, 72, 116, .38), inset 0 1px 0 rgba(255, 255, 255, .7);
  --lg-inp: rgba(255, 255, 255, .86); --lg-inp-solid: #FFFFFF; --lg-inp-bd: #ECD2DA; --lg-focus: #E0577B; --lg-ic: #6B6166;
  --lg-hl1: #E04673; --lg-hl2: #B8284F; --lg-btn1: #EC6E92; --lg-btn2: #D2486F; --lg-btn-tx: #FFFFFF;
  --lg-gbtn: rgba(255, 255, 255, .72); --lg-gbtn-bd: #E4D3D8; --lg-line: rgba(196, 150, 164, .42); --lg-link: #C2335E;
  --lg-pill: rgba(255, 255, 255, .78); --lg-pill-bd: #EBD8DE; --lg-pill-tx: #4D4247; --lg-on1: #F08AA5; --lg-on2: #E0577B; --lg-on-tx: #FFFFFF; --lg-on-bd: transparent;
  --lg-w1: rgba(246, 160, 186, .16); --lg-w2: rgba(242, 138, 170, .22); --lg-w3: rgba(236, 116, 154, .26); --lg-wl: rgba(232, 104, 144, .55);
}
:root[data-theme="dark"] .lgn {
  --lg-bg: #0C0A0D; --lg-glow1: rgba(168, 40, 88, .42); --lg-glow2: rgba(204, 62, 112, .30);
  --lg-text: #FFFFFF; --lg-muted: #B3A8AD; --lg-label: #CEC3C8;
  --lg-card: rgba(30, 22, 30, .55); --lg-card-bd: rgba(238, 122, 162, .34);
  --lg-card-sh: 0 0 56px -12px rgba(236, 96, 140, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
  --lg-inp: rgba(16, 12, 17, .66); --lg-inp-solid: #151017; --lg-inp-bd: rgba(226, 110, 150, .40); --lg-focus: #F07898; --lg-ic: #C2B6BB;
  --lg-hl1: #F78DA9; --lg-hl2: #E2648A; --lg-btn1: #F28AA4; --lg-btn2: #E0668A; --lg-btn-tx: #FFFFFF;
  --lg-gbtn: rgba(0, 0, 0, .22); --lg-gbtn-bd: rgba(255, 255, 255, .30); --lg-line: rgba(255, 255, 255, .14); --lg-link: #F27E9E;
  --lg-pill: rgba(20, 14, 20, .62); --lg-pill-bd: rgba(238, 122, 162, .36); --lg-pill-tx: #D6CCD1; --lg-on1: #A2385B; --lg-on2: #86294A; --lg-on-tx: #FFFFFF; --lg-on-bd: rgba(255, 150, 180, .45);
  --lg-w1: rgba(214, 70, 124, .10); --lg-w2: rgba(226, 84, 136, .15); --lg-w3: rgba(236, 100, 148, .20); --lg-wl: rgba(255, 128, 168, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lgn {
    --lg-bg: #0C0A0D; --lg-glow1: rgba(168, 40, 88, .42); --lg-glow2: rgba(204, 62, 112, .30);
    --lg-text: #FFFFFF; --lg-muted: #B3A8AD; --lg-label: #CEC3C8;
    --lg-card: rgba(30, 22, 30, .55); --lg-card-bd: rgba(238, 122, 162, .34);
    --lg-card-sh: 0 0 56px -12px rgba(236, 96, 140, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
    --lg-inp: rgba(16, 12, 17, .66); --lg-inp-solid: #151017; --lg-inp-bd: rgba(226, 110, 150, .40); --lg-focus: #F07898; --lg-ic: #C2B6BB;
    --lg-hl1: #F78DA9; --lg-hl2: #E2648A; --lg-btn1: #F28AA4; --lg-btn2: #E0668A; --lg-btn-tx: #FFFFFF;
    --lg-gbtn: rgba(0, 0, 0, .22); --lg-gbtn-bd: rgba(255, 255, 255, .30); --lg-line: rgba(255, 255, 255, .14); --lg-link: #F27E9E;
    --lg-pill: rgba(20, 14, 20, .62); --lg-pill-bd: rgba(238, 122, 162, .36); --lg-pill-tx: #D6CCD1; --lg-on1: #A2385B; --lg-on2: #86294A; --lg-on-tx: #FFFFFF; --lg-on-bd: rgba(255, 150, 180, .45);
    --lg-w1: rgba(214, 70, 124, .10); --lg-w2: rgba(226, 84, 136, .15); --lg-w3: rgba(236, 100, 148, .20); --lg-wl: rgba(255, 128, 168, .55);
  }
}
.login-wrap.lgn { position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 84px 16px 56px; color: var(--lg-text);
  background: radial-gradient(70% 55% at 0% 0%, var(--lg-glow1), transparent 70%), radial-gradient(85% 60% at 100% 100%, var(--lg-glow2), transparent 70%), var(--lg-bg); }
.login-wrap.lgn .login { position: static; width: 100%; max-width: 460px; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; gap: 22px; }
.login-wrap.lgn .lhead, .login-wrap.lgn .lgn-card { position: relative; z-index: 1; }
.login-wrap.lgn .lhead { gap: 12px; }
.login-wrap.lgn .lhead .logo { width: 64px; height: 64px; filter: drop-shadow(0 8px 18px rgba(224, 87, 123, .35)); }
.login-wrap.lgn .org { font-size: 12.5px; letter-spacing: 3.5px; font-weight: 600; color: var(--lg-muted); }
.login-wrap.lgn h1 { font-family: var(--font-ui); font-size: clamp(28px, 7.2vw, 40px); font-weight: 800; letter-spacing: -.8px; line-height: 1.1; color: var(--lg-text); }
.login-wrap.lgn h1 .hl { background: linear-gradient(90deg, var(--lg-hl1), var(--lg-hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lgn-lang { position: absolute; top: 24px; right: 24px; z-index: 2; }
.login-wrap.lgn .lang-sw { margin: 0; padding: 5px; gap: 4px; border-radius: 14px; background: var(--lg-pill); border: 1px solid var(--lg-pill-bd); box-shadow: 0 10px 28px -16px rgba(200, 60, 100, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.login-wrap.lgn .lang-sw button { min-width: 52px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--lg-pill-tx); font-size: 14px; font-weight: 600; }
.login-wrap.lgn .lang-sw button:hover { color: var(--lg-text); }
.login-wrap.lgn .lang-sw button.on, .login-wrap.lgn .lang-sw button[aria-pressed="true"] { background: linear-gradient(180deg, var(--lg-on1), var(--lg-on2)); color: var(--lg-on-tx); border-color: var(--lg-on-bd); box-shadow: 0 6px 14px -8px rgba(224, 87, 123, .8); }
.lgn-card { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 22px; border-radius: 22px; background: var(--lg-card); border: 1px solid var(--lg-card-bd); box-shadow: var(--lg-card-sh);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.login-wrap.lgn .field { gap: 9px; }
.login-wrap.lgn .field > label { font-size: 12.5px; letter-spacing: 2px; font-weight: 700; color: var(--lg-label); }
.lgn-inp { position: relative; }
.login-wrap.lgn .lgn-inp .input { width: 100%; height: 52px; padding: 0 50px 0 16px; border-radius: 12px; border: 1px solid var(--lg-inp-bd); background: var(--lg-inp); color: var(--lg-text); font-size: 15px; }
.login-wrap.lgn .lgn-inp .input::placeholder { color: var(--lg-muted); opacity: .85; }
.login-wrap.lgn .lgn-inp .input:focus { border-color: var(--lg-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-focus) 24%, transparent); }
.login-wrap.lgn .lgn-inp .input:-webkit-autofill { -webkit-text-fill-color: var(--lg-text); box-shadow: 0 0 0 1000px var(--lg-inp-solid) inset; caret-color: var(--lg-text); }
.lgn-ic { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; color: var(--lg-ic); pointer-events: none; }
.lgn-ic .i { width: 20px; height: 20px; }
button.lgn-eye { pointer-events: auto; padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer; }
button.lgn-eye:hover { color: var(--lg-text); }
button.lgn-eye:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 1px; }
.login-wrap.lgn .btn-p { height: 52px; width: 100%; gap: 10px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 700; color: var(--lg-btn-tx);
  background: linear-gradient(180deg, var(--lg-btn1), var(--lg-btn2)); box-shadow: 0 12px 26px -12px var(--lg-btn2), inset 0 1px 0 rgba(255, 255, 255, .28); }
.login-wrap.lgn .btn-p:hover { filter: brightness(1.05); }
.login-wrap.lgn .btn-p .i { width: 19px; height: 19px; }
.login-wrap.lgn .or { font-size: 13px; color: var(--lg-muted); gap: 14px; }
.login-wrap.lgn .or::before, .login-wrap.lgn .or::after { background: var(--lg-line); }
.login-wrap.lgn .gbtn { height: 52px; gap: 14px; border-radius: 12px; border: 1px solid var(--lg-gbtn-bd); background: var(--lg-gbtn); color: var(--lg-text); font-size: 15.5px; font-weight: 600; }
.login-wrap.lgn .gbtn:not(:disabled):hover { border-color: var(--lg-focus); }
.login-wrap.lgn .gbtn .g { width: 22px; height: 22px; border: 0; border-radius: 0; flex: 0 0 auto; }
.login-wrap.lgn .lgn-card p { font-size: 13.5px; line-height: 1.5; color: var(--lg-muted); }
.login-wrap.lgn .lfoot { align-items: flex-start; gap: 12px; padding-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--lg-muted); border-top-color: var(--lg-line); }
.login-wrap.lgn .lfoot svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.login-wrap.lgn .lacc { margin: 0; }
.login-wrap.lgn .lacc .link { color: var(--lg-link); font-size: 15px; font-weight: 700; }
.login-wrap.lgn .lgn-card > .btn-s { width: 100%; justify-content: center; }
.lgn-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 36vh; min-height: 190px; pointer-events: none; z-index: 0; }
.lgn-wave .w1 { fill: var(--lg-w1); } .lgn-wave .w2 { fill: var(--lg-w2); } .lgn-wave .w3 { fill: var(--lg-w3); }
.lgn-wave .l1, .lgn-wave .l2, .lgn-wave .l3 { fill: none; stroke: var(--lg-wl); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.lgn-wave .l2 { opacity: .65; } .lgn-wave .l3 { opacity: .4; }
@media (max-width: 767px) {
  .login-wrap.lgn { padding: calc(76px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px)); align-items: start; }
  .lgn-lang { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
  .login-wrap.lgn .login { gap: 18px; margin-top: 0; }
  .lgn-card { padding: 24px 18px 18px; gap: 14px; }
  .login-wrap.lgn .org { font-size: 11.5px; letter-spacing: 2.6px; }
  .login-wrap.lgn .lang-sw button { min-width: 48px; height: 40px; }
}