/* Aura Supply OS -- SALES OS felulet (supply-os/sales/).
 *
 * A tervtabla (sales-os-terv.html, shell.html + frames-*) komponens-rendszere, valodi elemekre igazitva.
 * A szinek a Supply OS tokenjeibol jonnek (/css/tokens.css, ELOSZOR toltve): az itteni rovid nevek
 * (--bg, --surface, --primary ...) csak aliasok, igy a sotet mod (data-theme="dark" vagy a rendszer-
 * beallitas) automatikusan atvaltja oket. Literal szin csak a tervtabla sajat, tokenekben nem szereplo
 * tonus- es statusz-szineinel all (WIDGETEK, Uzenetek statuszok), ugyanazokkal az ertekekkel.
 */

/* ── Tokenek ─────────────────────────────────────────────────────────────── */
:root {
  --bg: var(--color-bg); --surface: var(--color-surface); --surface-2: var(--color-surface-2); --surface-3: var(--color-surface-3);
  --border: var(--color-border); --border-strong: var(--color-border-strong);
  --text: var(--color-text); --text-2: var(--color-text-secondary); --muted: var(--color-text-muted); --inverse: var(--color-text-inverse);
  --primary: var(--color-primary); --primary-hover: var(--color-primary-hover); --primary-subtle: var(--color-primary-subtle); --on-primary: #FFFFFF;
  --ok: var(--color-success); --ok-bg: var(--color-success-bg); --warn: var(--color-warning); --warn-bg: var(--color-warning-bg);
  --bad: var(--color-danger); --bad-bg: var(--color-danger-bg); --info: var(--color-info); --info-bg: var(--color-info-bg);
  --ai: var(--color-ai); --ai-bg: var(--color-ai-bg);
  --shadow: 0 1px 2px rgba(30,26,24,.06), 0 8px 28px rgba(30,26,24,.08);
  --t-orange: #C9502A; --t-blue: #2D5BD0; --t-green: #1E6B3C; --t-purple: #5A3FC2; --t-amber: #93630F; --t-red: #7B2436; --t-ink: #FFF4EE;
  --ton-orange: #FF6A3D; --ton-blue: #4C7DFF; --ton-green: #34C26E; --ton-purple: #8B6CFF; --ton-red: #F0506E; --ton-amber: #F2A93B;
  --hl: rgba(255,255,255,.05); --widget-shadow: 0 10px 28px -16px rgba(30,26,24,.35);
  --s-none: #9AA0A6; --s-new: #FDAB3D; --s-wait: #FFCB00; --s-prog: #579BFC; --s-neg: #A25DDC;
  --s-done: #00C875; --s-later: #A9BEE8; --s-lost: #E2445C; --s-irr: #4A4A4A; --s-ink-dark: #1F1A14; --s-ink-light: #FFFFFF;
  --s-part: color-mix(in srgb, var(--s-new) 50%, var(--s-irr)); --s-teal: color-mix(in srgb, var(--s-done) 55%, var(--s-prog));
  --font-display: Georgia, 'Times New Roman', serif;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
  --side-w: 216px;
}
:root[data-theme="dark"] {
  --on-primary: #1A0E09;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45);
  --widget-shadow: 0 10px 28px -16px rgba(0,0,0,.55);
  --s-irr: #6E6E6E;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --on-primary: #1A0E09;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45);
  --widget-shadow: 0 10px 28px -16px rgba(0,0,0,.55);
  --s-irr: #6E6E6E;
} }

/* ── Alap ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
[hidden] { display: none !important; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
svg.i { width: 16px; height: 16px; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); } .t2 { color: var(--text-2); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.sp { margin-left: auto; }
.nw { white-space: nowrap; }
.r, .tbl th.r, .tbl td.r { text-align: right; }
.up { color: var(--ok); font-weight: 600; } .down { color: var(--bad); font-weight: 600; }
.link { color: var(--primary); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font-size: inherit; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; }

/* ── App-hej ─────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 14px; z-index: 40; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 6px; text-decoration: none; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.brand b { display: block; font-size: 13.5px; color: var(--text); } .brand > span:not(.logo) span { display: block; font-size: 11.5px; color: var(--muted); }
.nav-g { display: flex; flex-direction: column; gap: 2px; }
.nav-g > small { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); padding: 6px 8px 4px; font-weight: 600; }
.nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-md); font-size: 13px; color: var(--text-2); text-decoration: none; transition: background var(--motion-fast); }
.nav:hover { background: var(--surface-2); color: var(--text); }
.nav .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.nav.on { background: var(--primary-subtle); color: var(--primary); font-weight: 600; }
.nav.on .cnt { color: var(--primary); }
.nav .dot { margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 10.5px; display: grid; place-items: center; font-weight: 700; padding: 0 5px; }
.side-foot { margin-top: auto; font-size: 11px; color: var(--muted); padding: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.side-bd { display: none; }
.main { display: flex; flex-direction: column; min-width: 0; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ib.hamb { display: none; }
.gsearch { position: relative; flex: 1 1 auto; max-width: 420px; min-width: 0; }
.gsearch .search { width: 100%; }
.search { height: 34px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--muted); font-size: 13px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; height: 100%; font-size: 13px; color: var(--text); }
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.search kbd { font-family: var(--font-mono); font-size: 10.5px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.search svg { width: 15px; height: 15px; }
.gres { position: absolute; top: 40px; left: 0; right: 0; z-index: 50; max-height: 70vh; overflow: auto; }
.gres .menu-h { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 9px 3px; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ib { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text-2); position: relative; padding: 0; flex: 0 0 auto; }
.ib:hover { color: var(--text); border-color: var(--border-strong); }
.ib svg { width: 16px; height: 16px; }
.ib .badge-n { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.shop { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; color: var(--text); border: 1px solid color-mix(in srgb, var(--ton-green) 55%, var(--border)); background: color-mix(in srgb, var(--ton-green) 10%, var(--surface)); white-space: nowrap; text-decoration: none; }
.shop:hover { background: color-mix(in srgb, var(--ton-green) 18%, var(--surface)); }
.shop svg { width: 15px; height: 15px; color: var(--ton-green); }
.shop small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); font-weight: 500; }
.user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; text-align: left; }
.user:hover, .user[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.user b { display: block; font-size: 12.5px; } .user .ut > span { display: block; font-size: 11px; color: var(--muted); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--t-purple); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.av-sm { width: 24px; height: 24px; font-size: 9.5px; }
.av-c0 { background: var(--t-purple); } .av-c1 { background: var(--t-blue); } .av-c2 { background: var(--t-green); } .av-c3 { background: var(--t-red); } .av-c4 { background: var(--t-amber); } .av-c5 { background: var(--t-orange); }
.content { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.view { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.page-h { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page-h h1 { margin: 0; font-size: 22px; letter-spacing: -.2px; }
.page-h p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.page-h .act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb { font-size: 12px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; } .crumb a:hover { color: var(--primary); }

/* ── Komponensek (shell.html) ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; font-family: inherit; text-decoration: none; transition: background var(--motion-fast), border-color var(--motion-fast), opacity var(--motion-fast); }
.btn svg { width: 15px; height: 15px; }
.btn-p { background: var(--primary); color: var(--on-primary); }
.btn-p:hover:not(:disabled) { background: var(--primary-hover); }
.btn-s { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-s:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
.btn-g { background: transparent; color: var(--text-2); }
.btn-g:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-ai { background: var(--ai-bg); color: var(--ai); }
.btn-bad { background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; }
.btn:disabled { opacity: .5; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--on-primary); border-right-color: transparent; animation: spin .7s linear infinite; }
.btn-s.is-busy::after, .btn-g.is-busy::after { border-color: var(--text-2); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-h h2, .card-h h3 { margin: 0; font-size: 13.5px; }
.card-h .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-h small { color: var(--muted); font-size: 12px; }
.card-b { padding: 14px; }
.card-f { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.lay-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.lay-side-n { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* KPI-widget (Supply OS WIDGETEK) */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { --ton: var(--ton-orange); position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 14px; align-items: center; padding: 16px 18px 18px; border-radius: 16px; text-align: left;
  background: radial-gradient(140% 110% at 0% 0%, color-mix(in srgb, var(--ton) 13%, transparent) 0%, transparent 55%), linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 75%);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); box-shadow: inset 0 1px 0 var(--hl), var(--widget-shadow); min-width: 0; color: var(--text); font: inherit; transition: transform var(--motion-fast), border-color var(--motion-fast); }
.kpi::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px; opacity: .75; z-index: -1; background: linear-gradient(90deg, transparent, var(--ton), transparent); }
button.kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ton) 40%, transparent); }
.kpi.on { border-color: var(--ton); box-shadow: inset 0 0 0 1px var(--ton), var(--widget-shadow); }
.kpi .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--ton); background: color-mix(in srgb, var(--ton) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 35%, transparent), 0 0 24px -6px color-mix(in srgb, var(--ton) 55%, transparent); }
.kpi .ico svg { width: 22px; height: 22px; }
.kpi.tn-orange { --ton: var(--ton-orange); } .kpi.tn-blue { --ton: var(--ton-blue); } .kpi.tn-green { --ton: var(--ton-green); }
.kpi.tn-purple { --ton: var(--ton-purple); } .kpi.tn-red { --ton: var(--ton-red); } .kpi.tn-amber { --ton: var(--ton-amber); }
.kpi.kwarn { background: radial-gradient(140% 110% at 0% 0%, color-mix(in srgb, var(--ton) 18%, transparent) 0%, transparent 55%), var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.kpi.kwarn .v { color: var(--warn); }
.kpi .kb { min-width: 0; }
.kpi .l { font-size: 13px; font-weight: 500; color: var(--text-2); }
.kpi .v { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .v small { font-size: 13px; color: var(--text-2); font-weight: 600; }
.kpi .s { font-size: 11.5px; color: var(--muted); }
.kpis.k5 .kpi { padding: 12px; gap: 10px; } .kpis.k5 .kpi .v { font-size: 20px; } .kpis.k5 .kpi .ico { width: 38px; height: 38px; }
.kpi.compact { padding: 14px 14px 16px; gap: 12px; } .kpi.compact .ico { width: 40px; height: 40px; } .kpi.compact .ico svg { width: 19px; height: 19px; } .kpi.compact .v { font-size: 21px; }

/* Tablazat */
.tw { overflow-x: auto; min-width: 0; position: relative; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 9px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.clk { cursor: pointer; }
.tbl tbody tr.clk:hover td { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.tbl tr.sel td { background: var(--primary-subtle); }
.tbl tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.tbl .chk { width: 32px; }
.tbl.tight th { padding: 8px 6px; font-size: 9.5px; letter-spacing: .3px; } .tbl.tight td { padding: 7px 6px; font-size: 12px; }
.tbl tfoot td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--border-strong); }
.tbl tfoot td small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
input[type="checkbox"].cbx { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; vertical-align: middle; cursor: pointer; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.nodot::before { display: none; }
.st-draft { background: var(--surface-3); color: var(--text-2); }
.st-sent { background: var(--info-bg); color: var(--info); }
.st-opened { background: var(--ai-bg); color: var(--ai); }
.st-viewed { background: var(--warn-bg); color: var(--warn); }
.st-ordered { background: var(--ok-bg); color: var(--ok); }
.st-paid { background: var(--ok); color: var(--surface); }
.st-expired, .st-cancelled, .st-bad { background: var(--bad-bg); color: var(--bad); }
.st-handed_over { background: var(--info-bg); color: var(--info); }
.st-shipped { background: var(--ok); color: var(--surface); }
.st-ok { background: var(--ok-bg); color: var(--ok); } .st-warn { background: var(--warn-bg); color: var(--warn); } .st-info { background: var(--info-bg); color: var(--info); } .st-mut { background: var(--surface-3); color: var(--text-2); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; background: var(--surface); }
.tag i { width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-2); background: var(--surface); white-space: nowrap; font-family: inherit; }
button.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on, .chip[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); font-weight: 600; }
.chip svg { width: 14px; height: 14px; }
.chip .num { font-size: 11px; color: var(--muted); }
.chip.on .num { color: var(--primary); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips .sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 2px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; gap: 2px; background: var(--surface); flex: 0 0 auto; }
.seg button { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 4px; color: var(--text-2); background: transparent; border: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.seg button:hover { color: var(--text); }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--primary-subtle); color: var(--primary); }
.seg button svg { width: 14px; height: 14px; }

/* Urlap */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .field > .lbl { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field > label.search { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--muted); }
.field .help, .help { font-size: 11px; color: var(--muted); line-height: 1.35; }
.field.err .input { border-color: var(--bad); background: var(--bad-bg); }
.field.err .help, .field.err > label { color: var(--bad); }
.input { height: 34px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 0 10px; font-size: 13px; color: var(--text); min-width: 0; width: 100%; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.input:disabled, .input[readonly] { background: var(--surface-2); color: var(--text-2); }
textarea.input { height: auto; min-height: 70px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
select.input { padding-right: 6px; }
.input-sm { height: 28px; font-size: 12px; padding: 0 8px; }
.input.num { text-align: right; font-family: var(--font-mono); }
.ig { display: flex; align-items: stretch; min-width: 0; }
.ig .input { border-radius: var(--r-md) 0 0 var(--r-md); }
.ig .ig-a { display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface-2); font-size: 12px; color: var(--muted); white-space: nowrap; }
.fg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.fg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.fg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.span2 { grid-column: span 2; } .spanall { grid-column: 1 / -1; }
.toggle { width: 34px; height: 20px; border-radius: 10px; background: var(--surface-3); position: relative; flex: 0 0 auto; border: 1px solid var(--border); padding: 0; transition: background var(--motion-fast); }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left var(--motion-fast); }
.toggle[aria-checked="true"], .toggle.on { background: var(--primary); border-color: var(--primary); }
.toggle[aria-checked="true"]::after, .toggle.on::after { left: 16px; background: #fff; }
.toggle:disabled { opacity: .5; }
.chk-l { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.chk-l input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }

.bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.bar.low > i { background: var(--warn); } .bar.crit > i { background: var(--bad); }
.av-ok, .av-warn, .av-bad, .av-mut, .av-info { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.av-ok svg, .av-warn svg, .av-bad svg, .av-info svg { width: 12px; height: 12px; }
.av-ok { background: var(--ok-bg); color: var(--ok); } .av-warn { background: var(--warn-bg); color: var(--warn); } .av-bad { background: var(--bad-bg); color: var(--bad); }
.av-mut { background: var(--surface-3); color: var(--text-2); } .av-info { background: var(--info-bg); color: var(--info); }
.thumb { width: 34px; height: 34px; border-radius: 8px; background: var(--primary-subtle); color: var(--primary); display: grid; place-items: center; flex: 0 0 auto; }
.thumb svg { width: 16px; height: 16px; }
.thumb.noimg { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--muted); }
.prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prod > div > b { display: block; font-size: 12.5px; font-weight: 600; } .prod > div > span { display: block; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.two b { display: block; font-weight: 600; font-size: 12.5px; } .two span { display: block; font-size: 11px; color: var(--muted); }
.idc { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.idc small { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 400; color: var(--muted); }
.who { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl { display: flex; flex-direction: column; }
.tl-i { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; padding: 0 0 12px; position: relative; font-size: 12.5px; }
.tl-i::before { content: ''; position: absolute; left: 7px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
.tl-i:last-child::before { display: none; }
.tl-i .d { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); margin-top: 1px; }
.tl-i.done .d { border-color: var(--ok); background: var(--ok); }
.tl-i.now .d { border-color: var(--primary); background: var(--primary-subtle); }
.tl-i.err .d { border-color: var(--bad); background: var(--bad-bg); }
.tl-i > div > b { display: block; font-size: 12.5px; } .tl-i > div > span:not(.src2) { color: var(--muted); font-size: 11.5px; display: block; }
.tl-i .src2 { width: fit-content; }
.tl-i time { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 5px; min-width: 230px; }
.menu-i { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-md); font-size: 12.5px; width: 100%; background: transparent; border: 0; text-align: left; color: var(--text); text-decoration: none; }
.menu-i:hover:not(:disabled), .menu-i:focus-visible { background: var(--surface-2); }
.menu-i svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.menu-i small { margin-left: auto; color: var(--muted); font-size: 11px; }
.menu-i:disabled, .menu-i.dis { color: var(--muted); }
.menu-i.bad { color: var(--bad); } .menu-i.bad svg { color: var(--bad); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.menu-h { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 5px 9px 3px; }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-md); padding: 10px 12px; font-size: 12.5px; border: 1px solid transparent; }
.alert.bad { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.alert.info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.alert.ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.alert b { color: inherit; }
.alert svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.alert .grow { flex: 1; min-width: 0; }
.tot { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 13px; }
.tot .big { font-size: 18px; font-weight: 700; }
.tot .num { text-align: right; }
.sparks { width: 100%; height: auto; display: block; }
.sparks text { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; font-size: 12.5px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; overflow-wrap: anywhere; }
.hd { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; }
.pager { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.pg { min-width: 28px; height: 28px; border-radius: var(--r-md); border: 1px solid var(--border); display: inline-grid; place-items: center; font-size: 12px; background: var(--surface); padding: 0 6px; color: var(--text); }
.pg.on { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); font-weight: 600; }
.pg:disabled { opacity: .45; }
.bulk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--primary-subtle); border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; font-size: 12.5px; flex-wrap: wrap; }
.bulk .sep { width: 1px; height: 18px; background: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filters .grow { flex: 1 1 240px; }
.ic-btn { width: 28px; height: 28px; border-radius: var(--r-md); display: inline-grid; place-items: center; color: var(--text-2); background: transparent; border: 0; padding: 0; }
.ic-btn:hover, .ic-btn[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.ic-btn svg { width: 15px; height: 15px; }
.ann { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2); border: 1px dashed color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary-subtle) 55%, var(--surface)); border-radius: var(--r-md); padding: 8px 10px; }

/* Ajanlat-tipus */
.ot { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.ot::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.ot-stock { color: var(--ok); } .ot-make { color: var(--ai); } .ot-incoming { color: var(--info); }
.otype { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.otype button { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); text-align: left; }
.otype button b { font-size: 13px; display: flex; align-items: center; gap: 6px; } .otype button span { font-size: 11.5px; color: var(--text-2); }
.otype button[aria-checked="true"] { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); padding: 9px 11px; }
.otype .rad { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); flex: 0 0 auto; }
.otype [aria-checked="true"] .rad { border-color: var(--ok); box-shadow: inset 0 0 0 3px var(--surface); background: var(--ok); }
.otype button:disabled { opacity: .6; }
tr.conf td { opacity: .6; } tr.conf td:first-child { box-shadow: inset 3px 0 0 var(--bad); opacity: 1; }
tr.conf td.keep { opacity: 1; }
.conf-tag { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--bad); white-space: normal; max-width: 140px; line-height: 1.3; }
.splitp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.splitp > div { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: 12px; color: var(--text-2); background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.splitp > div b { color: var(--text); font-size: 12.5px; }

/* "Nincs bekotve" jelzes -- mindenhol ugyanaz */
.nc { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.nc svg { width: 12px; height: 12px; color: var(--muted); }
.nc.err { border-style: solid; border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); color: var(--bad); background: var(--bad-bg); }
.nc.ok { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); color: var(--ok); background: var(--ok-bg); }
.nc-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); font-size: 12.5px; }
.nc-card .lg { grid-row: span 3; width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-weight: 800; font-size: 11px; }
.nc-card b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.nc-card .why { color: var(--text-2); }
.nc-card .next { color: var(--muted); font-size: 11.5px; }
.nc-card .next b { display: inline; font-size: 11.5px; color: var(--text-2); }
.nc-card.ok { border-style: solid; border-color: var(--border); background: var(--surface); }
.nc-card.ok .lg { background: var(--ok-bg); color: var(--ok); }
.nc-card.err { border-style: solid; border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.nc-card.err .lg { background: var(--bad-bg); color: var(--bad); }

/* ── Allapotok: betoltes, ures, hiba ─────────────────────────────────────── */
.skel { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--r-md); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-kpi { height: 92px; border-radius: 16px; }
.skel-line { height: 12px; margin: 10px 14px; }
.skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } .skel-line.w80 { width: 80%; }
.skel-row { height: 36px; margin: 6px 14px; }
.skel-h { height: 26px; width: 220px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--text-2); }
.empty .ei { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; }
.empty .ei svg { width: 24px; height: 24px; }
.empty b { font-size: 14.5px; color: var(--text); }
.empty p { margin: 0; font-size: 12.5px; max-width: 46ch; }
.empty.sm { padding: 18px 12px; } .empty.sm .ei { width: 38px; height: 38px; } .empty.sm .ei svg { width: 18px; height: 18px; }
.errbox { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 20px; }
.errbox .ei { width: 52px; height: 52px; border-radius: 50%; background: var(--bad-bg); color: var(--bad); display: grid; place-items: center; }
.errbox.locked .ei { background: var(--warn-bg); color: var(--warn); }
.errbox .ei svg { width: 24px; height: 24px; }
.errbox b { font-size: 14.5px; } .errbox p { margin: 0; font-size: 12.5px; color: var(--text-2); max-width: 52ch; }

/* ── Retegek: toast, modal, fiok (drawer), felugro menu ──────────────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(420px, calc(100vw - 32px)); }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 10px 12px; font-size: 13px; animation: toastIn .18s ease-out; }
.toast svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.toast.ok { border-left-color: var(--ok); } .toast.ok svg { color: var(--ok); }
.toast.bad { border-left-color: var(--bad); } .toast.bad svg { color: var(--bad); }
.toast.warn { border-left-color: var(--warn); } .toast.warn svg { color: var(--warn); }
.toast.info svg { color: var(--info); }
.toast .x { margin-left: auto; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }
.ov { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, #000 42%, transparent); display: grid; place-items: center; padding: 16px; animation: fadeIn .15s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.modal.lg { width: min(820px, 100%); } .modal.sm { width: min(420px, 100%); }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-h h2 { margin: 0; font-size: 15px; }
.modal-h .ic-btn { margin-left: auto; }
.modal-b { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); flex-wrap: wrap; }
.dw-ov { position: fixed; inset: 0; z-index: 150; background: color-mix(in srgb, #000 28%, transparent); animation: fadeIn .15s ease-out; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 160; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -22px 0 40px -22px color-mix(in srgb, var(--text) 50%, transparent), var(--shadow); display: flex; flex-direction: column; animation: dwIn .2s ease-out; }
.drawer.wide { width: min(560px, 100vw); }
/* A design-system.css .drawer-e translateX(100%) + .open-ra var; a Sales OS fiokja nem kap .open-t, ezert itt semlegesitjuk (kulonben a panel a kepernyon kivul marad). */
.drawer { transform: none; transition: none; }
@keyframes dwIn { from { transform: translateX(30px); opacity: 0; } }
.dw-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dw-h h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dw-h .ic-btn { margin-left: auto; flex: 0 0 auto; }
.dw-b { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pop { position: fixed; z-index: 250; }

/* ── Belepes ─────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background:
  radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--primary) 24%, transparent) 0%, transparent 60%),
  radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--ton-amber) 20%, transparent) 0%, transparent 60%), var(--bg); }
.login { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 26px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.login .lhead { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.login .logo { width: 52px; height: 52px; border-radius: 14px; font-size: 19px; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.login .org { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.login h1 { margin: 0; font-family: var(--font-display); font-size: 23px; line-height: 1.15; font-weight: 600; letter-spacing: -.3px; }
.login p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; text-align: center; }
.login .btn-p { height: 42px; width: 100%; }
.or { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text); }
.gbtn .g { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.gbtn:disabled { opacity: .55; }
.lfoot { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--border); }
.lfoot svg { width: 13px; height: 13px; }
.form-err { font-size: 12px; color: var(--bad); background: var(--bad-bg); border-radius: var(--r-md); padding: 7px 10px; }

/* ── Vezerlopult ─────────────────────────────────────────────────────────── */
.fun { display: flex; flex-direction: column; gap: 2px; }
.fun-r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 86px; gap: 10px; align-items: center; font-size: 12.5px; }
.fun-r .r { text-align: right; font-variant-numeric: tabular-nums; }
.fun-b { height: 26px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.fun-b i { display: block; height: 100%; border-radius: var(--r-sm); transition: width .4s ease-out; }
.fun-cv { padding-left: 106px; font-size: 11px; color: var(--muted); line-height: 1.2; padding-block: 1px; }
.fun-cv b { color: var(--text-2); font-family: var(--font-mono); font-weight: 600; }
.c-draft { background: var(--border-strong); } .c-info { background: var(--info); } .c-ai { background: var(--ai); }
.c-warn { background: var(--warn); } .c-ok { background: color-mix(in srgb, var(--ok) 50%, var(--surface)); } .c-paid { background: var(--ok); } .c-bad { background: var(--bad); }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.leg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; gap: 5px 8px; align-items: center; font-size: 12px; }
.leg .num { text-align: right; }
.donut { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; }
.dn { width: 128px; height: 128px; display: block; }
.dn text { font-family: var(--font-mono); fill: var(--muted); font-size: 9px; }
.dn .dn-n { font-size: 22px; fill: var(--text); font-weight: 700; }
.li-list { display: flex; flex-direction: column; }
.li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; text-decoration: none; color: var(--text); background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; width: 100%; }
a.li:hover, button.li:hover { background: var(--surface-2); }
.li:last-child { border-bottom: 0; }
.li b { display: block; font-weight: 600; }
.li .s { display: block; color: var(--muted); font-size: 11.5px; }
.ci { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ci svg { width: 15px; height: 15px; }
.ci-warn { background: var(--warn-bg); color: var(--warn); } .ci-bad { background: var(--bad-bg); color: var(--bad); }
.ci-info { background: var(--info-bg); color: var(--info); } .ci-mut { background: var(--surface-3); color: var(--text-2); }
.ci-ok { background: var(--ok-bg); color: var(--ok); } .ci-ai { background: var(--ai-bg); color: var(--ai); }
.cnt-b { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--text-2); white-space: nowrap; }
.chart-leg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.chart-leg b { color: var(--text); }
.ctot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ctot > button { border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 9px; font-size: 11.5px; color: var(--muted); background: var(--surface-2); text-align: left; }
.ctot > button.on { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--primary-subtle); }
.ctot b { display: block; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 5px 8px; font-size: 11.5px; white-space: nowrap; transform: translate(-50%, -110%); }
.chart-wrap { position: relative; }
.chart-pt { cursor: pointer; }

/* Verseny + jutalek widget (dash-add) */
.e-hico { display: inline-grid; place-items: center; color: var(--ton-amber); }
.e-hico svg { width: 16px; height: 16px; }
.e-hico.e-c { color: var(--ton-green); }
.e-tb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.e-tb .chip { height: 28px; font-size: 12px; }
.e-tb .e-rng { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.e-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 14px; padding: 0 28px; border-bottom: 2px solid var(--border-strong); }
.e-pc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.e-pc > b { font-size: 12.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.e-pc .e-ps { font-size: 11px; color: var(--muted); }
.e-troph { color: var(--ton-amber); display: grid; place-items: center; margin-bottom: 2px; }
.e-troph svg { width: 24px; height: 24px; }
.e-pav { position: relative; margin-bottom: 4px; }
.e-pav .av { width: 44px; height: 44px; font-size: 14px; box-shadow: 0 0 0 3px var(--surface); }
.e-1 .e-pav .av { width: 58px; height: 58px; font-size: 17px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ton-amber), 0 0 22px -4px color-mix(in srgb, var(--ton-amber) 70%, transparent); }
.e-me .e-pav .av { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.e-rk { position: absolute; right: -6px; bottom: -4px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; background: var(--surface-3); color: var(--text); border: 2px solid var(--surface); }
.e-1 .e-rk { background: var(--ton-amber); color: var(--s-ink-dark); }
.e-me .e-rk { background: var(--primary); color: var(--on-primary); }
.e-amt { font-family: var(--font-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-1 .e-amt { font-size: 16px; }
.e-step { width: 100%; margin-top: 6px; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--muted); }
.e-s1 { height: 62px; font-size: 26px; color: var(--t-amber); border-color: color-mix(in srgb, var(--ton-amber) 50%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--ton-amber) 24%, var(--surface)) 0%, var(--surface-2) 100%); }
.e-s2 { height: 44px; }
.e-me .e-step { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: linear-gradient(180deg, var(--primary-subtle) 0%, var(--surface-2) 100%); }
.e-s3 { height: 30px; }
.e-te { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 6px; border-radius: 999px; background: var(--primary); color: var(--on-primary); line-height: 1.4; }
.e-lb { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.e-lr { display: grid; grid-template-columns: 20px 26px minmax(0, 128px) minmax(60px, 1fr) 96px 52px 34px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-md); font-size: 12.5px; }
.e-lh { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-block: 0 4px; border-bottom: 1px solid var(--border); border-radius: 0; }
.e-lr .av { width: 26px; height: 26px; font-size: 10px; }
.e-n { font-family: var(--font-mono); font-weight: 700; color: var(--muted); text-align: center; }
.e-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: center; min-width: 0; }
.e-lr .bar { height: 8px; border-radius: 4px; }
.e-lr .bar > i { border-radius: 4px; background: color-mix(in srgb, var(--text-2) 38%, var(--surface-3)); }
.e-lr.e-me { background: var(--primary-subtle); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.e-lr.e-me .bar > i { background: var(--primary); }
.e-lr.e-me .e-n { color: var(--primary); }
.e-r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-lr .e-r.e-a { font-weight: 600; }
.e-lr .e-r.e-d { color: var(--text-2); font-size: 12px; }
.e-chg { font-family: var(--font-mono); font-size: 11.5px; text-align: right; white-space: nowrap; }
.e-flat { color: var(--muted); }
.e-mehint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); font-size: 12px; color: var(--text-2); }
.e-mehint b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.e-foot svg { width: 14px; height: 14px; color: var(--ok); }
.e-upd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.e-jut { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.e-goal { display: grid; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.e-goal .row { justify-content: space-between; flex-wrap: nowrap; }
.e-goal .bar { height: 7px; }
.e-goal .bar > i { background: var(--ton-green); }
.e-prev { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-2); padding-top: 8px; border-top: 1px solid var(--border); }
.e-prev b { font-family: var(--font-mono); color: var(--text); font-weight: 600; white-space: nowrap; }
.e-cr { display: grid; gap: 2px; font-size: 11.5px; }
.e-cr > small { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 2px; }
.e-cri { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.e-cri:last-child { border-bottom: 0; }
.e-cri .mono { font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.e-crp { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-cri b { font-family: var(--font-mono); color: var(--ok); font-weight: 600; white-space: nowrap; }
.e-prize { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--ton-amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ton-amber) 35%, transparent); border-radius: 999px; padding: 2px 8px; margin-top: 4px; max-width: 100%; text-align: center; }
.e-prize svg { width: 12px; height: 12px; flex: 0 0 auto; }
.e-pz { border: 1px dashed color-mix(in srgb, var(--ton-amber) 45%, var(--border)); border-radius: var(--r-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; background: color-mix(in srgb, var(--ton-amber) 5%, var(--surface)); }
.e-pzh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; } .e-pzh > svg { width: 15px; height: 15px; color: var(--ton-amber); }
.e-pzlock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } .e-pzlock svg { width: 12px; height: 12px; }
.e-pzg { display: grid; grid-template-columns: 70px minmax(0, 1fr) 140px 32px; gap: 6px 8px; align-items: center; }
.e-pzr { font-size: 12px; font-weight: 700; color: var(--text-2); }
.e-pzg .input { height: 30px; font-size: 12.5px; }

/* ── Keszlet + kosar ─────────────────────────────────────────────────────── */
.stk { display: flex; flex-direction: column; gap: 4px; min-width: 104px; }
.stk b { font-variant-numeric: tabular-nums; font-weight: 600; }
.inc { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.inc .row { gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
.warn-t { color: var(--warn); font-weight: 600; } .bad-t { color: var(--bad); font-weight: 600; } .ok-t { color: var(--ok); font-weight: 600; }
.cart { background: var(--primary-subtle); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow); }
.cart-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); font-size: 12.5px; flex-wrap: wrap; }
.cart-h h2 { margin: 0; font-size: 14px; }
.cart-g { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.cart-gh { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.cart-l { display: grid; grid-template-columns: minmax(0, 1.25fr) 130px minmax(0, 1.6fr) 32px; gap: 8px 14px; align-items: center; padding: 6px 14px; }
.cart-l .thumb { width: 28px; height: 28px; background: var(--surface); }
.cart-f { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.cart-f .act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cart-f svg { width: 14px; height: 14px; }
.stat-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); white-space: nowrap; }
.stat-chip i { width: 7px; height: 7px; border-radius: 2px; background: var(--warn); }
.stat-chip.ready i { background: var(--ok); } .stat-chip.ordered i { background: var(--info); } .stat-chip.qc i { background: var(--ai); }

/* ── Ajanlat-szerkeszto ──────────────────────────────────────────────────── */
.rte { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.rte:focus-within { border-color: var(--primary); }
.rte-t { display: flex; gap: 2px; align-items: center; padding: 3px 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.rte-t button { min-width: 26px; height: 24px; display: grid; place-items: center; border-radius: var(--r-sm); padding: 0 6px; background: transparent; border: 0; color: var(--text-2); font-size: 12px; }
.rte-t button:hover { background: var(--surface); color: var(--text); }
.rte-t small { margin-left: auto; color: var(--muted); font-size: 11px; }
.rte-b { padding: 9px 11px; font-size: 12.5px; line-height: 1.5; color: var(--text); min-height: 90px; outline: none; }
.rte-b p { margin: 0 0 6px; }
.rte-b a { color: var(--primary); }
.tbar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--primary-subtle); border-bottom: 1px solid var(--border); font-size: 12.5px; flex-wrap: wrap; }
.tbar b { color: var(--primary); }
.lines th, .lines td { padding: 8px 5px; }
.lines th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.lines th:first-child, .lines td:first-child { padding-left: 10px; }
.lines th:last-child, .lines td:last-child { padding-right: 12px; }
.lines .prod { min-width: 130px; }
.lines .prod > div > b { font-size: 12px; white-space: normal; }
.lines .avc { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 110px; }
.lines .avc .av-ok, .lines .avc .av-warn, .lines .avc .av-bad, .lines .avc .av-mut, .lines .avc .av-info { white-space: normal; line-height: 1.25; }
.lines .input { height: 28px; font-size: 12px; padding: 0 6px; }
.lines .q-in { width: 70px; }
.lines .p-in { width: 72px; }
.lines .d-in { width: 50px; }
.lines .v-in { width: 80px; padding-right: 2px; }
.lines .ig-a { padding: 0 6px; font-size: 11px; }
.lines .lnet { min-width: 92px; }
.hint { font-size: 11px; color: var(--muted); }
.lfoot-g { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; padding: 14px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.auto-r { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.auto-r:last-child { border-bottom: 0; padding-bottom: 0; }
.auto-r:first-child { padding-top: 0; }
.auto-r > div { flex: 1; min-width: 0; }
.auto-r > div > span:not(.nc) { display: block; color: var(--muted); font-size: 11.5px; }
.tplm { width: 84px; height: 108px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.tplm i { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); }
.tplm i.h { height: 12px; background: var(--primary); } .tplm i.t { height: 22px; background: var(--surface-2); border: 1px solid var(--border); } .tplm i.s { width: 60%; } .tplm i.b { height: 8px; width: 50%; background: var(--primary-subtle); margin-left: auto; }
.pubbox { display: flex; gap: 6px; align-items: center; }
.pubbox .input { font-family: var(--font-mono); font-size: 12px; }
.isearch { position: relative; }
.ires { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.ires .ir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0; }
.ires .ir:hover, .ires .ir:focus-visible { background: var(--surface-2); }
.ires .ir:last-child { border-bottom: 0; }

/* ── Rendelesek, jutalek (frames-d) ──────────────────────────────────────── */
.sync { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--text-2); border: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.sync.off i { background: var(--border-strong); box-shadow: none; }
.sync.err i { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.sync b { color: var(--text); font-weight: 600; }
.sync .mono { font-size: 11px; }
.otbl { font-size: 11.5px; }
.otbl th, .otbl td { padding-left: 6px; padding-right: 6px; }
/* E2E ORDERS (2026-10-08): 375 px-en a Rendelesek tabla sorai kartyak -- az osszeg, a fizetes es a Supply OS allapota
   vizszintes gorgetes nelkul latszik (rendeles + forras, partner + ertekesito, brutto + teendo, fizetes + Supply OS). */
@media (max-width: 640px) {
  .otbl thead { display: none; }
  .otbl, .otbl tbody { display: block; }
  .otbl tr.clk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--border); }
  .otbl tr.clk > td { display: block; padding: 0; border: 0; min-width: 0; }
  .otbl tr.clk > td:nth-child(2), .otbl tr.clk > td:nth-child(4), .otbl tr.clk > td:nth-child(8) { justify-self: end; }
  .otbl tr.clk > td:nth-child(5) { order: 5; text-align: left; }
  .otbl tr.clk > td:nth-child(8) { order: 6; }
  .otbl tr.clk > td:nth-child(6) { order: 7; }
  .otbl tr.clk > td:nth-child(7) { order: 8; justify-self: end; }
  .otbl tr.clk > td:nth-child(9) { order: 9; grid-column: 1 / -1; }
  .otbl tr.clk > td:nth-child(9):has(.msgc-z) { display: none; }
  .otbl .dpl { white-space: normal; }
}
.br { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.br small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.src { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: var(--r-md); font-size: 11px; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; line-height: 1.15; }
.src svg { width: 13px; height: 13px; }
.src-webshop { color: var(--ok); background: color-mix(in srgb, var(--ton-green) 9%, var(--surface)); border-color: color-mix(in srgb, var(--ton-green) 40%, var(--border)); }
.src-offer { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.src-t { display: flex; flex-direction: column; }
.src-t b { font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.dpl { white-space: nowrap; line-height: 1.2; border-radius: 8px; padding: 3px 7px; display: inline-flex; gap: 5px; align-items: flex-start; font-size: 11px; font-weight: 600; }
.dpl svg { width: 12px; height: 12px; margin-top: 1px; }
.dpl small { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; opacity: .85; }
.cnt-r { min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 6px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); background: var(--ai-bg); color: var(--ai); }
.cnt-r.z { background: var(--surface-3); color: var(--muted); font-weight: 600; }
/* UZENETEK oszlop a Rendelesek tablaban (2026-10-21, views/order-chat.js S.supplyChatCell): darabszam + olvasatlan + utolso uzenet. */
/* a szelesseg a kepernyovel nyulik (1512 px-en ~166 px), hogy a tabla oldaliranyu gorgetes nelkul elferjen; a szoveg levagva */
.msgc { display: flex; flex-direction: column; gap: 3px; width: clamp(92px, 11vw, 190px); }
.msgc-h { display: inline-flex; align-items: center; gap: 4px; }
.msgc-n { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 10px; font: 700 11px/1 var(--font-mono); background: var(--info-bg); color: var(--info); }
.msgc-n svg { width: 12px; height: 12px; }
.msgc.un .msgc-n { background: var(--bad); color: var(--surface); }
.msgc .pill { font-size: 10.5px; padding: 1px 6px; }
.msgc-t { display: block; font-size: 10.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgc-t b { font-weight: 600; color: var(--text-2); }
.msgc.un .msgc-t { color: var(--text); }
.dsum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.dsum > div { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 8px; background: var(--surface-2); font-size: 10.5px; color: var(--muted); }
.dsum b { display: block; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsum > div.on { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--primary-subtle); }
.dsum > div.on b { font-size: 15px; }
.dkv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; font-size: 12px; align-items: center; margin: 0; }
.dkv dt { color: var(--muted); font-size: 11px; }
.dkv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.src2 { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.src2 svg { width: 11px; height: 11px; }
.src2.fin { background: var(--ok-bg); color: var(--ok); } .src2.sup { background: var(--info-bg); color: var(--info); }
.task { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.task:last-child { border-bottom: 0; }
.task .av { width: 26px; height: 26px; font-size: 10px; }
.task > div > b { display: block; font-weight: 600; }
.task > div > span { display: block; font-size: 11px; color: var(--muted); }
.task.done b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.task select { height: 26px; font-size: 11.5px; padding: 0 4px; width: auto; }
.tform { display: grid; gap: 8px; padding: 12px; background: var(--surface-2); border-radius: var(--r-md); }
.tform .input { height: 30px; font-size: 12px; }
.com { display: flex; align-items: center; gap: 10px; }
.com .av { width: 34px; height: 34px; }
.com > div > b { display: block; font-size: 13px; } .com > div > span { display: block; font-size: 11px; color: var(--muted); }
.eq { margin-top: 10px; padding: 9px 10px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.eq b { color: var(--text); }
.eq .res { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--ok); }
.feed { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.feed:last-child { border-bottom: 0; }
.feed time { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.jt { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-weight: 700; }
.jt small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
.jt.exp { color: var(--muted); font-weight: 600; font-style: italic; }
.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.how li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.how li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); font-style: normal; }
.how li i svg { width: 12px; height: 12px; }
.how li span { color: var(--muted); display: block; font-size: 11.5px; }
.rank { display: grid; grid-template-columns: 14px 26px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 8px; }
.rank .av { width: 26px; height: 26px; font-size: 10px; }
.rank .n { font-family: var(--font-mono); font-weight: 700; color: var(--muted); text-align: center; }
.rank.me { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--primary-subtle); }
.rank.me .n { color: var(--primary); }
.rank .num { grid-column: 3; font-size: 11.5px; font-weight: 600; }
.ranks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; }
.ch .sparks text.hi { fill: var(--primary); font-weight: 700; font-size: 11px; }
.ch .sparks text.vl { fill: var(--text-2); font-weight: 600; }
.leg2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-top: 6px; }
.leg2 .sw { margin-right: 5px; vertical-align: -1px; width: 10px; height: 10px; }

/* ── Uzenetek: statusz-szinek (a szin CSAK allapotot jelol) ─────────────── */
.c-none { --c: var(--s-none); --ink: var(--s-ink-light); } .c-new { --c: var(--s-new); --ink: var(--s-ink-dark); }
.c-wait { --c: var(--s-wait); --ink: var(--s-ink-dark); } .c-prog { --c: var(--s-prog); --ink: var(--s-ink-light); }
.c-neg { --c: var(--s-neg); --ink: var(--s-ink-light); } .c-done { --c: var(--s-done); --ink: var(--s-ink-light); }
.c-later { --c: var(--s-later); --ink: var(--s-ink-dark); } .c-lost { --c: var(--s-lost); --ink: var(--s-ink-light); }
.c-irr { --c: var(--s-irr); --ink: var(--s-ink-light); } .c-part { --c: var(--s-part); --ink: var(--s-ink-light); }
.c-teal { --c: var(--s-teal); --ink: var(--s-ink-light); }
.c-src0 { --c: color-mix(in srgb, var(--s-prog) 75%, var(--s-irr)); --ink: var(--s-ink-light); }
.c-src1 { --c: color-mix(in srgb, var(--s-lost) 60%, var(--s-new)); --ink: var(--s-ink-light); }
.c-src2 { --c: color-mix(in srgb, var(--s-neg) 75%, var(--s-irr)); --ink: var(--s-ink-light); }
.c-src3 { --c: color-mix(in srgb, var(--s-done) 70%, var(--s-irr)); --ink: var(--s-ink-light); }
.c-src4 { --c: var(--s-later); --ink: var(--s-ink-dark); }
.c-src5 { --c: color-mix(in srgb, var(--s-prog) 55%, var(--s-neg)); --ink: var(--s-ink-light); }
.c-src6 { --c: color-mix(in srgb, var(--s-lost) 55%, var(--s-neg)); --ink: var(--s-ink-light); }
.c-src7 { --c: color-mix(in srgb, var(--s-new) 70%, var(--s-lost)); --ink: var(--s-ink-dark); }
.c-orange { --c: var(--s-new); --ink: var(--s-ink-dark); } .c-yellow { --c: var(--s-wait); --ink: var(--s-ink-dark); }
.c-blue { --c: var(--s-prog); --ink: var(--s-ink-light); } .c-purple { --c: var(--s-neg); --ink: var(--s-ink-light); }
.c-green { --c: var(--s-done); --ink: var(--s-ink-light); } .c-indigo { --c: var(--s-later); --ink: var(--s-ink-dark); }
.c-red { --c: var(--s-lost); --ink: var(--s-ink-light); } .c-gray { --c: var(--s-irr); --ink: var(--s-ink-light); }
.c-slate { --c: var(--s-none); --ink: var(--s-ink-light); }
.c-pink { --c: color-mix(in srgb, var(--s-lost) 55%, var(--s-new)); --ink: var(--s-ink-light); }
.c-cyan { --c: color-mix(in srgb, var(--s-prog) 50%, var(--s-done)); --ink: var(--s-ink-light); }
.c-empty { --c: color-mix(in srgb, var(--s-none) 28%, var(--surface-2)); --ink: var(--text-2); }
.m-st { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--c); color: var(--ink); border: 0; }
.m-st-sm { height: 20px; padding: 0 8px; font-size: 11px; }
.m-temp { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.m-temp.hot { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.m-temp.warm { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.m-temp.cold { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }
.m-ch { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); display: inline-grid; place-items: center; flex: 0 0 auto; }
.m-ch svg { width: 13px; height: 13px; }
.m-sdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--c); }
.mt-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-tools .search { width: 260px; }
.mt-scroll { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.mt-inner { width: max-content; min-width: 100%; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 20px; }
/* MESSAGES E2E: a csoport szine a .c-<token> osztalybol jon (a :where 0 specificitasu alapertek nem irja felul). */
:where(.mt-g) { --c: var(--s-none); }
.mt-g { display: flex; flex-direction: column; gap: 8px; }
.mt-g.hl { background: color-mix(in srgb, var(--s-wait) 9%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-wait) 60%, transparent); border-radius: var(--r-lg); padding: 10px 10px 6px; margin: 0 -10px; }
.mt-gh { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--c) 72%, var(--text)); }
.mt-gh > button.tg { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 4px 2px 0; color: inherit; font: inherit; }
.mt-gh svg { width: 16px; height: 16px; color: var(--c); transition: transform var(--motion-fast); }
.mt-g.closed .mt-gh > button.tg svg { transform: rotate(-90deg); }
.mt-gh small { font-size: 12px; font-weight: 500; color: var(--muted); }
.mt-t { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12.5px; border-left: 4px solid var(--c); border-radius: var(--r-md) 0 0 var(--r-md); }
.mt-t th { height: 34px; padding: 0 8px; font-size: 11.5px; font-weight: 600; color: var(--text-2); text-align: center; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-t td { height: 38px; padding: 0 8px; text-align: center; background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-t .l { text-align: left; }
.mt-t td.f { padding: 0; background: var(--c); color: var(--ink); font-weight: 600; font-size: 12px; border-right-color: var(--surface); border-bottom-color: var(--surface); }
.mt-t td.f > button, .mt-t td.f > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 37px; padding: 0 8px; background: transparent; border: 0; color: inherit; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-t td.f > button:hover { filter: brightness(1.06); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent); }
.mt-t tbody tr.lead-r { cursor: pointer; }
.mt-t tbody tr.lead-r:hover td:not(.f) { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.mt-t tr.sel td:not(.f) { background: color-mix(in srgb, var(--primary-subtle) 85%, var(--surface)); }
.mt-t tr.sel td.lead { box-shadow: inset 2px 0 0 var(--primary); }
.mt-lc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mt-lc b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mt-conv { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-family: var(--font-mono); color: var(--muted); }
.mt-conv svg { width: 13px; height: 13px; }
.mt-conv.on { color: var(--primary); }
.mt-t .av { width: 24px; height: 24px; font-size: 9.5px; margin: 0 auto; }
.mt-msg { box-shadow: inset 3px 0 0 var(--w, var(--border-strong)); padding-left: 11px !important; }
.mt-msg.w-y { --w: var(--s-wait); } .mt-msg.w-r { --w: var(--s-lost); }
.mt-mc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-mc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); text-align: left; }
.mt-mc time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.mt-msg.w-y .mt-mc time { color: var(--warn); font-weight: 600; } .mt-msg.w-r .mt-mc time { color: var(--bad); font-weight: 600; }
.mt-date { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); }
.mt-mail { color: var(--text-2); font-size: 12px; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.mt-fu { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mt-fu svg { width: 12px; height: 12px; }
.mt-fu.late { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
.mt-fu.today { background: color-mix(in srgb, var(--s-wait) 26%, var(--surface)); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-wait) 70%, transparent); }
.mt-t tr.add td { height: 36px; color: var(--muted); text-align: left; font-size: 12.5px; padding: 0 4px; }
.mt-t tr.add input { height: 28px; border: 1px solid transparent; background: transparent; width: 100%; padding: 0 6px; font-size: 12.5px; border-radius: var(--r-sm); color: var(--text); }
.mt-t tr.add input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.mt-t tr.sum td { height: 34px; padding: 0 6px; background: transparent; border-bottom: 0; border-right-color: transparent; }
.mt-dist { display: flex; gap: 2px; height: 22px; }
.mt-dist i { display: block; min-width: 3px; background: var(--c); }
.mt-dist i:first-child { border-radius: 4px 0 0 4px; } .mt-dist i:last-child { border-radius: 0 4px 4px 0; } .mt-dist i:only-child { border-radius: 4px; }
.mt-sumt { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.mt-avs { display: inline-flex; vertical-align: middle; }
.mt-avs .av { width: 20px; height: 20px; font-size: 8.5px; margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.mt-avs .av:first-child { margin-left: 0; }
.mt-avs .avm { background: var(--surface-3); color: var(--text-2); }
.mt-more { padding: 4px 8px; }
.stmenu .menu-i { padding: 5px 8px; }
.stmenu .menu-i .sw2 { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: 0 0 auto; }
.newst { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px; }
.sws { display: flex; gap: 6px; flex-wrap: wrap; }
.sws button { width: 20px; height: 20px; border-radius: 50%; background: var(--c); display: block; border: 0; padding: 0; }
.sws button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.m-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Beszelgetes-fiok */
.m-dhead { display: flex; align-items: flex-start; gap: 10px; }
.m-dhead .av { width: 38px; height: 38px; font-size: 13px; }
.m-dname { font-size: 15px; font-weight: 700; display: block; }
.m-dsub { font-size: 12px; color: var(--text-2); }
.m-steps { display: flex; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.m-step { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; font-size: 10.5px; font-weight: 600; background: var(--surface-2); color: var(--muted); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); margin-right: -6px; padding: 0 14px; white-space: nowrap; border: 0; }
.m-step:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.m-step.done, .m-step.now { background: var(--c); color: var(--ink); }
.m-step.done { opacity: .8; }
.m-step svg { width: 12px; height: 12px; }
.mt-sync { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.mt-sync svg { width: 13px; height: 13px; color: var(--ok); }
.mt-sync b { color: var(--ok); font-weight: 600; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .m-steps::-webkit-scrollbar { display: none; }
.tabs button { padding: 7px 10px; color: var(--text-2); font-weight: 600; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tabs small { font-family: var(--font-mono); color: var(--muted); margin-left: 3px; font-weight: 500; }
.m-tl { display: flex; flex-direction: column; gap: 8px; }
.m-day { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.m-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.m-ev { display: flex; gap: 8px; align-items: flex-start; }
.m-ev > .m-ch { margin-top: 2px; }
.m-bub { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface-2); font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.m-bub .meta { color: var(--muted); font-size: 11px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.m-bub .body { white-space: pre-wrap; color: var(--text); }
.m-ev.in .m-bub { background: var(--surface); border-color: var(--s-wait); }
.m-ev.note .m-bub { border-style: dashed; }
.m-ev.sys .m-bub { background: transparent; border: 0; padding: 2px 0; color: var(--muted); font-size: 11.5px; }
.m-compose { border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.m-compose textarea { border: 0; padding: 4px 2px; min-height: 64px; box-shadow: none; }
.m-compose textarea:focus { box-shadow: none; }
.m-ctools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.m-ctools .chip { height: 26px; }
.m-cact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-fu { font-size: 12px; font-family: var(--font-mono); color: var(--warn); background: var(--warn-bg); padding: 2px 8px; border-radius: 999px; }
.mt-from { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); padding-bottom: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.mt-from b { color: var(--text); font-weight: 600; font-family: var(--font-mono); font-size: 11.5px; }
/* Kanban */
.m-kanban { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.m-kcol { background: var(--surface-2); border-radius: var(--r-lg); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 120px; transition: box-shadow var(--motion-fast), background var(--motion-fast); }
.m-kcol.hl { background: color-mix(in srgb, var(--s-wait) 14%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-wait) 55%, transparent); }
.m-kcol.drop { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface-2)); }
.m-kh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 4px; white-space: nowrap; }
.m-kh .m-scnt { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.m-kbody { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.m-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; cursor: grab; text-align: left; width: 100%; font: inherit; color: inherit; }
.m-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--surface-3); }
.m-card.w-y::before { background: var(--s-wait); } .m-card.w-r::before { background: var(--s-lost); }
.m-card.dragging { opacity: .45; }
.m-card:active { cursor: grabbing; }
.m-ctop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.m-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.m-msg { font-size: 12px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-cfoot { display: flex; align-items: center; gap: 6px; }
.m-age { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.m-age svg { width: 12px; height: 12px; }
.m-kempty { font-size: 12px; color: var(--muted); text-align: center; padding: 18px 8px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
/* Mobil lista */
.m-mlist { display: none; flex-direction: column; gap: 8px; }
.m-mcard { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-align: left; width: 100%; font: inherit; color: inherit; }
.m-mcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--surface-3); }
.m-mcard.w-y::before { background: var(--s-wait); } .m-mcard.w-r::before { background: var(--s-lost); }
.m-mcard .av { width: 34px; height: 34px; grid-row: span 3; }

/* ── Tetelek, partnerek, sablonok, beallitasok (frames-c) ────────────────── */
.dq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dq .kpi { align-items: flex-start; } .dq .kpi .v { font-size: 20px; } .dq .kpi .s { color: var(--text-2); }
.blk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.blk:last-child { border-bottom: 0; }
.blk small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.blk .toggle { margin-left: auto; }
.blk.off { color: var(--muted); }
.grp-s { padding: 12px 14px; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.grp-s:last-child { border-bottom: 0; }
.grp-s h3 { margin: 0; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.srow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.srow .toggle { margin-left: auto; }
.srow small { display: block; font-size: 10.5px; color: var(--muted); }
.srow.c-locked { opacity: .6; }
.lockt { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--bad); font-weight: 600; }
.lockt svg { width: 12px; height: 12px; }
.newb { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: var(--ai); background: var(--ai-bg); border-radius: 4px; padding: 1px 5px; text-transform: none; }
.trow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.trow:last-child { border-bottom: 0; }
.trow .toggle { margin-top: 1px; }
.trow b { display: block; font-size: 12.5px; font-weight: 600; }
.trow span.h { display: block; font-size: 11px; color: var(--muted); }
.trow .grow { flex: 1; min-width: 0; }
.ro { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 7px; font-size: 12px; }
.ro > b { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.ro .kvr { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cprev { background: var(--surface-2); padding: 14px; }
.cpage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; font-size: 11px; }
.cpage-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 3px solid var(--primary); }
.cpage-h .logo { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; }
.cpsec { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cpsec h4 { margin: 0 0 3px; font-size: 13px; font-family: var(--font-display); }
.cpsec p { margin: 0 0 4px; color: var(--text-2); }
.cmini th { padding: 5px 6px; font-size: 9px; } .cmini td { padding: 5px 6px; font-size: 10.5px; }
.cmini .cgrp td { background: var(--surface-2); font-weight: 700; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-2); }
.ptot { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 8px 14px; font-size: 11px; }
.ptot .big { font-size: 13px; font-weight: 700; }
.int { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.int:last-child { border-bottom: 0; }
.int > .grow { min-width: 0; flex: 1; }
.int b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.int span.h { display: block; font-size: 11px; color: var(--muted); }
.int .r { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lg30 { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--t-ink); font-size: 11px; font-weight: 800; flex: 0 0 auto; background: var(--t-blue); }
.lg30.n { background: var(--surface-3); color: var(--muted); }
.lang { display: flex; flex-wrap: wrap; gap: 5px; }
.lang span { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.lang span.x { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); font-weight: 500; }
.steps-c { display: grid; gap: 2px; }
.urate { display: grid; grid-template-columns: 26px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.urate:last-child { border-bottom: 0; }
.urate .av { width: 26px; height: 26px; font-size: 10px; }

.col3 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1240px) { .col3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .col3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .col3 { grid-template-columns: minmax(0, 1fr); } }
/* Menu-szerkeszto */
.med { display: flex; flex-direction: column; gap: 4px; }
.med-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); background: var(--primary-subtle); color: var(--primary); font-size: 12px; font-weight: 600; flex-wrap: wrap; }
.med-h svg { width: 15px; height: 15px; }
.med-h small { margin-left: auto; font-weight: 500; color: var(--text-2); font-size: 11px; }
.med-i { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 13px; user-select: none; }
.med-i .gr { color: var(--border-strong); cursor: grab; display: grid; place-items: center; width: 22px; height: 24px; border: 0; background: none; padding: 0; }
.med-i .gr:focus-visible { color: var(--primary); }
.med-i .gr svg { width: 14px; height: 14px; }
.med-i .nm { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.med-i.hid { opacity: .55; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); }
.med-i.hid .nm span { text-decoration: line-through; }
.med-i.dragging { opacity: .4; }
.med-i.over { box-shadow: 0 -2px 0 var(--primary); }
.med-i .htag { font-size: 10px; font-weight: 600; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 0 5px; }
.med-f { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 6px; flex-wrap: wrap; }
.med-f .btn-p { margin-left: auto; }
/* Profil */
.acc-who { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--border); }
.acc-who .av { width: 52px; height: 52px; font-size: 17px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.acc-who > div > b { display: block; font-size: 15px; } .acc-who > div > span { display: block; font-size: 12px; color: var(--muted); }
.acc-who .pill { margin-left: auto; }
.ekv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ekv > .lbl { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 8px; }
.ekv .v { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ekv .v .h { font-size: 11px; color: var(--muted); }
.big-n { font-size: 18px; font-weight: 700; font-family: var(--font-mono); }
.tiles { display: flex; flex-wrap: wrap; gap: 5px; }
.tile { flex: 1 1 auto; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 6px 8px; text-align: center; font-size: 10.5px; color: var(--text-2); line-height: 1.25; }
.tile b { display: block; font-size: 11px; color: var(--text); }
.tile.soon { border-style: dashed; color: var(--muted); }
.tile.me { border: 1.5px dashed var(--primary); background: var(--primary-subtle); } .tile.me b { color: var(--primary); }

/* ── Reszponziv ──────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lay-side { grid-template-columns: minmax(0, 1fr) 300px; }
  .e-lr { grid-template-columns: 20px 26px minmax(0, 120px) minmax(40px, 1fr) 92px 44px; }
  .e-lr > :nth-child(7) { display: none; }
}
@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g21, .lay-side, .lay-side-n { grid-template-columns: minmax(0, 1fr); }
  .lfoot-g { grid-template-columns: minmax(0, 1fr); }
  .m-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dq { grid-template-columns: minmax(0, 1fr); }
  .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-102%); transition: transform var(--motion-base); box-shadow: var(--shadow); }
  body.nav-open .side { transform: translateX(0); }
  body.nav-open .side-bd { display: block; position: fixed; inset: 0; z-index: 35; background: color-mix(in srgb, #000 35%, transparent); }
  .ib.hamb { display: grid; }
  .top { padding: 0 12px; gap: 8px; }
  .gsearch { max-width: none; }
  .shop span.t, .shop small, .user .ut, .search kbd { display: none; }
  .shop { padding: 0 9px; }
}
@media (max-width: 640px) {
  .content { padding: 14px 12px; }
  .kpis, .kpis.k3, .kpis.k5 { grid-template-columns: minmax(0, 1fr); }
  .kpi { padding: 12px 14px 14px; } .kpi .v { font-size: 22px; } .kpi .ico { width: 40px; height: 40px; }
  .g2, .g3, .fg2, .fg3, .fg4 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  .page-h h1 { font-size: 20px; }
  .page-h .act { margin-left: 0; width: 100%; }
  .otype { grid-template-columns: minmax(0, 1fr); }
  .splitp { grid-template-columns: minmax(0, 1fr); }
  .cart-l { grid-template-columns: minmax(0, 1fr) 110px 32px; } .cart-l .cav { grid-column: 1 / -1; }
  .m-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-signals .kpi .ico { display: none; }
  .mt-tools .search { width: 100%; }
  .msg-table { display: none; }
  .m-mlist { display: flex; }
  .e-pod { padding: 0 4px; gap: 6px; }
  .e-lr { grid-template-columns: 18px 24px minmax(0, 1fr) 84px; gap: 8px; }
  .e-lr > :nth-child(4), .e-lr > :nth-child(6), .e-lr > :nth-child(7) { display: none; }
  .e-pzg { grid-template-columns: 54px minmax(0, 1fr) 32px; } .e-pzg .pzv { grid-column: 2; }
  .donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ranks { grid-template-columns: minmax(0, 1fr); }
  .ekv { grid-template-columns: minmax(0, 1fr); }
  .drawer, .drawer.wide { width: 100vw; }
  .gsearch .search { padding: 0 8px; }
  .top-r { gap: 6px; flex: 0 0 auto; }
  .top { gap: 6px; padding: 0 8px; }
  .user { padding: 2px; }
  .gsearch .search { min-width: 40px; }
  .toasts { left: 16px; right: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .side, .top, .toasts, .side-bd { display: none !important; }
  .app { display: block; }
}

/* ── OFFERS (1. bővítési hullám, 2026-10-07): címkék, lista-lapozás, export-időszak, húzható sorok, partneroldal-beállítás ── */
.tag.tc-orange i, .swatch.tc-orange i { background: var(--t-orange); }
.tag.tc-blue i, .swatch.tc-blue i { background: var(--t-blue); }
.tag.tc-green i, .swatch.tc-green i { background: var(--t-green); }
.tag.tc-purple i, .swatch.tc-purple i { background: var(--t-purple); }
.tag.tc-amber i, .swatch.tc-amber i { background: var(--t-amber); }
.tag.tc-red i, .swatch.tc-red i { background: var(--t-red); }
.tag.tc-gray i, .swatch.tc-gray i { background: var(--muted); }
:root[data-theme="dark"] .tag.tc-orange i, :root[data-theme="dark"] .swatch.tc-orange i { background: var(--ton-orange); }
:root[data-theme="dark"] .tag.tc-blue i, :root[data-theme="dark"] .swatch.tc-blue i { background: var(--ton-blue); }
:root[data-theme="dark"] .tag.tc-green i, :root[data-theme="dark"] .swatch.tc-green i { background: var(--ton-green); }
:root[data-theme="dark"] .tag.tc-purple i, :root[data-theme="dark"] .swatch.tc-purple i { background: var(--ton-purple); }
:root[data-theme="dark"] .tag.tc-amber i, :root[data-theme="dark"] .swatch.tc-amber i { background: var(--ton-amber); }
:root[data-theme="dark"] .tag.tc-red i, :root[data-theme="dark"] .swatch.tc-red i { background: var(--ton-red); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag.tc-orange i, :root:not([data-theme="light"]) .swatch.tc-orange i { background: var(--ton-orange); }
  :root:not([data-theme="light"]) .tag.tc-blue i, :root:not([data-theme="light"]) .swatch.tc-blue i { background: var(--ton-blue); }
  :root:not([data-theme="light"]) .tag.tc-green i, :root:not([data-theme="light"]) .swatch.tc-green i { background: var(--ton-green); }
  :root:not([data-theme="light"]) .tag.tc-purple i, :root:not([data-theme="light"]) .swatch.tc-purple i { background: var(--ton-purple); }
  :root:not([data-theme="light"]) .tag.tc-amber i, :root:not([data-theme="light"]) .swatch.tc-amber i { background: var(--ton-amber); }
  :root:not([data-theme="light"]) .tag.tc-red i, :root:not([data-theme="light"]) .swatch.tc-red i { background: var(--ton-red); }
}
.otags { display: flex; flex-wrap: wrap; gap: 3px; max-width: 170px; }
.opager { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-top: 1px solid var(--border); }
.opager .grow { flex: 1; min-width: 0; }
.opager .pager { border-top: 0; }
.opager select.input { width: auto; height: 28px; padding: 0 6px; font-size: 12px; }
.xrange { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.xrange .input { width: 138px; }
.card.is-loading { opacity: .6; transition: opacity .15s; }
.tagpick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tagpick-i { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.tagpick-i:has(input:checked) { border-color: var(--primary); background: var(--primary-subtle); }
.swatches { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.swatch i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.swatch[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-subtle), inset 0 0 0 1px var(--primary); }
.lay-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cprev-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-bottom: 3px solid var(--primary); border-radius: var(--r-md); }
.cprev-h b { display: block; font-size: 13px; }
.cprev-h span.muted { display: block; font-size: 11px; }
.plogo { display: inline-grid; place-items: center; min-width: 34px; height: 34px; flex: 0 0 auto; }
.plogo img { display: block; max-height: 34px; max-width: 120px; object-fit: contain; }
.plogo.lg { height: 52px; min-width: 52px; padding: 4px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.plogo.lg img { max-height: 42px; max-width: 160px; }
.lines .dragh { cursor: grab; color: var(--muted); width: 26px; height: 26px; }
.lines .dragh:active { cursor: grabbing; }
.lines tr.dragging { opacity: .45; }
.lines tr.drop-before td { box-shadow: inset 0 2px 0 var(--primary); }
.lines tr.drop-after td { box-shadow: inset 0 -2px 0 var(--primary); }
.tplpick { display: flex; flex-direction: column; gap: 6px; }
.tplpick label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-size: 13px; }
.tplpick label:has(input:checked) { border-color: var(--primary); background: var(--primary-subtle); }
.tplpick input { accent-color: var(--primary); margin-top: 2px; }
@media (max-width: 900px) {
  .lay-2 { grid-template-columns: minmax(0, 1fr); }
  .xrange { width: 100%; }
  .xrange .input { flex: 1; width: auto; min-width: 0; }
  .otags { max-width: none; }
  .opager { flex-wrap: wrap; padding-top: 8px; }
}

/* ── OPS (2026-10-07): nyelvvalto, ugyintezo-kep, kotelezo mezok, partner-urlap szallitasi cime ───────────── */
.lang-sw button { padding: 4px 7px; font-size: 11.5px; }
.av-img { object-fit: cover; background: var(--surface-2); padding: 0; }
.av-lg { width: 48px; height: 48px; font-size: 15px; }
.fset { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px 12px; margin: 0; min-width: 0; }
.fset legend { font-size: 12px; font-weight: 600; color: var(--text); padding: 0 4px; }
.req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.ck { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.ck input { margin-top: 2px; accent-color: var(--primary); }
.tag.off { color: var(--muted); border-style: dashed; }
@media (max-width: 560px) {
  .req-grid { grid-template-columns: 1fr; }
  .lang-sw button { padding: 3px 6px; }
}

/* ══ MOB-SALES (2026-10-08): telefonos nézet (≤767px) -- Készlet (+kosár), Ajánlatok (+szűrő-lap, tömeges sáv, sor-menü,
 * export), Ajánlat-szerkesztő (tétel-kártyák, ragadós műveletsáv), Címkék és partneroldal, Rendelések (+teljes lapos fiók).
 * Péter Supply OS mobil-grafikája szerint, a MOB-SHELL keret szerződésére építve (shell.css „MOBIL NÉZET”: --mob-also,
 * .mob-tabbar, .mob-only, .mob-scroll; a modál és a drawer alulról nyíló lap). A nézetek gyökér-osztálya: .msl-stock,
 * .msl-offers, .msl-oed, .msl-setup, .msl-orders (a views/*.js adja); a lap-segéd: S.msl / S.mslMenu (views/stock.js).
 * Asztalon (≥768px) ebből CSAK az első szabály hat: a szűrő-lap burkolója (.msl-fs) nem képez dobozt, a mezők a régi
 * helyükön maradnak -- az asztali nézet változatlan (1440 px-en előtte/utána mérve). */
.msl-fs, .msl-cls { display: contents; }

@media (max-width: 767px) {
  body.msl-lock { overflow: hidden; }

  /* ── Alulról nyíló lap (szűrők, export, kosár): a nézetben meglévő doboz kapja a .msl-open osztályt ─────────── */
  .msl-bd { position: fixed; inset: 0 0 var(--mob-also) 0; z-index: 140; background: color-mix(in srgb, #000 45%, transparent); animation: fadeIn .15s ease-out; }
  .msl-open, .msl-open.mob-only { position: fixed !important; left: 0; right: 0; bottom: var(--mob-also); z-index: 150; display: flex !important; flex-direction: column; gap: 14px; width: auto !important; min-height: 45dvh; max-height: calc(100dvh - var(--mob-also) - var(--mob-top-h, 56px) - var(--mob-safe-top, 0px)); overflow-y: auto; overscroll-behavior: contain; margin: 0 !important; padding: 0 16px 16px; background: var(--surface); border: 0; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); animation: mobSheetIn .2s ease-out; }
  .msl-sh-h.mob-only { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 2; min-height: 58px; margin: 0 -16px; padding: 16px 12px 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .msl-sh-h::before, .msl-stock #cartw .cart-h::before, .pop.msl-msheet > .menu::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .msl-sh-h b { font-size: 16px; min-width: 0; }
  .msl-sh-h .btn { min-width: 88px; }
  .msl-fbtn.mob-only { display: inline-flex !important; gap: 6px; padding: 0 12px; }
  .msl-fbtn svg { width: 16px; height: 16px; }
  .msl-fn { color: var(--primary); font-weight: 700; }
  .msl-fn:empty { display: none; }
  .msl-xbtn.mob-only { display: grid !important; width: 44px; height: 44px; border-radius: var(--r-md); }
  /* Kártya telefonon: a design-system .card 16px-es paddingje + a fejléc / törzs saját paddingje dupla volt (a mező a
     képernyő szélétől ~47px-re). Telefonon a kártya maga nem paddingol: a belső tér a .card-h / .card-b 12–14px-e. */
  .msl-stock .card, .msl-offers .card, .msl-oed .card, .msl-setup .card, .msl-orders .card, .drawer.msl-odw .card { padding: 0; }
  .msl-l.mob-only { display: block !important; margin-bottom: 3px; font: 600 11px/1.25 var(--font-ui); letter-spacing: .4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

  /* Szűrő-sáv: kereső + „Szűrők (N)” (+ export) egy sorban; a többi mező a lapon. */
  .msl-stock .filters, .msl-offers .filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
  .msl-stock .filters > .field.grow > label:first-child, .msl-offers .filters > .field.grow > label:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .msl-stock .filters > .field.grow, .msl-offers .filters > .field.grow { grid-column: 1; }
  .msl-offers .filters > .msl-fbtn { grid-column: 2; } .msl-offers .filters > .msl-xbtn { grid-column: 3; }
  .msl-stock .filters > .msl-fbtn { grid-column: 2 / 4; }
  .msl-fs:not(.msl-open) { display: none; }
  .msl-fs.msl-open > .field, .msl-fs.msl-open > .lx-sort { width: auto !important; flex: 0 0 auto; }
  .msl-fs.msl-open > .btn { width: 100%; }
  .msl-xs.msl-open > p { margin: 0; font-size: 13px; line-height: 1.45; }
  .msl-xs.msl-open .fg2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .msl-xs.msl-open > .btn { width: 100%; margin-top: auto; }
  /* Fülsor / chip-sor a lap széléig görgethető (egy sorban). */
  .msl-offers #schips, .msl-orders .chips.mob-scroll { margin: 0 -16px; padding: 2px 16px; gap: 8px; }
  .msl-orders .chips.mob-scroll .sep { flex: 0 0 1px; align-self: center; }

  /* ── Sor-menü / „További” menü: alulról nyíló lap (S.mslMenu) ─────────────────────────────────────────── */
  .pop.msl-msheet { inset: 0 !important; display: flex; flex-direction: column; justify-content: flex-end; background: color-mix(in srgb, #000 45%, transparent); animation: fadeIn .15s ease-out; }
  .pop.msl-msheet > .menu { position: relative; width: auto !important; min-width: 0; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; padding: 20px 8px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; border-bottom: 0; animation: mobSheetIn .2s ease-out; }
  .pop.msl-msheet .menu-h { font-size: 12px; padding: 4px 12px 8px; }
  .pop.msl-msheet .menu-i { min-height: 48px; padding: 0 12px; gap: 12px; font-size: 15px; }
  .pop.msl-msheet .menu-i svg { width: 18px; height: 18px; }
  .pop.msl-msheet .menu-i small { font-size: 12px; text-align: right; }
  .pop.msl-msheet .menu-i.mob-only { display: flex !important; }

  /* ── Tömeges sáv: az alsó sáv FÖLÖTT rögzítve (Ajánlatok, Készlet) ─────────────────────────────────────── */
  .msl-offers .bulk, .msl-stock .bulk { position: fixed; left: 0; right: 0; bottom: var(--mob-also); z-index: 90; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--surface); box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); }
  .msl-offers .bulk > b, .msl-stock .bulk > b { grid-column: 1 / 3; grid-row: 1; font-size: 14px; color: var(--primary); }
  .msl-offers .bulk > .sep, .msl-stock .bulk > .sep, .msl-offers .bulk > .msl-bnote { display: none; }
  .msl-offers .bulk > [data-a="sel-clear"], .msl-stock .bulk > [data-a="sel-clear"] { grid-column: 3 / 5; grid-row: 1; justify-self: end; margin: 0; padding: 0 8px; }
  .msl-offers .bulk > .btn:not([data-a="sel-clear"]) { grid-row: 2; flex-direction: column; height: auto; min-height: 58px; padding: 6px 4px; gap: 4px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
  .msl-offers .bulk > .btn svg { width: 18px; height: 18px; }
  .msl-stock .bulk > [data-a="sel-cart"] { grid-column: 1 / -1; grid-row: 2; min-height: 48px; }
  .msl-offers.view:has(.bulk), .msl-stock.view:has(.bulk) { padding-bottom: 136px; } /* a kosar-sav 80px-es helyet is feluliraja */
  body:has(.msl-offers .bulk) .toasts, body:has(.msl-stock .bulk) .toasts, body:has(.msl-stock .msl-cbar) .toasts, body:has(.msl-oed) .toasts { bottom: calc(var(--mob-also) + 104px); }

  /* ── KÉSZLET ──────────────────────────────────────────────────────────────────────────────────────────── */
  .msl-stock .page-h .act { display: flex; gap: 8px; }
  .msl-stock .page-h .act > .btn { flex: 1 1 0; min-width: 0; }
  .msl-stock .kpi { width: 100%; }
  .msl-stock #stbl { background: transparent; border: 0; box-shadow: none; }
  .msl-stock #stbl > .card-h { padding: 2px 2px 10px; border-bottom: 0; }
  .msl-stock #stbl .tw { overflow: visible; }
  .msl-stock #stbl .tbl, .msl-stock #stbl .tbl tbody { display: block; }
  .msl-stock #stbl .tbl thead { display: none; }
  .msl-stock #stbl .tbl tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod prod" "cat cat" "av box" "inc inc" "off act"; gap: 8px 10px; align-items: center; margin: 0 0 10px; padding: 12px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .msl-stock #stbl .tbl tr:last-child { margin-bottom: 0; }
  .msl-stock #stbl .tbl tr.sel { border-color: var(--primary); background: var(--primary-subtle); }
  .msl-stock #stbl .tbl td { display: block; min-width: 0; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; text-align: left; }
  .msl-stock #stbl .tbl td:nth-child(1) { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; }
  .msl-stock #stbl .tbl td:nth-child(2) { grid-area: prod; padding-left: 26px !important; }
  .msl-stock #stbl .tbl td:nth-child(2) .thumb { display: none; }
  .msl-stock #stbl .tbl td:nth-child(3) { grid-area: cat; margin-top: -6px; padding-left: 26px !important; font-size: 12px; color: var(--muted); }
  .msl-stock #stbl .tbl td:nth-child(4) { grid-area: av; }
  .msl-stock #stbl .tbl td:nth-child(5):nth-last-child(4) { grid-area: box; text-align: right; font-size: 14px; }
  .msl-stock #stbl .tbl td:nth-last-child(3) { grid-area: inc; }
  .msl-stock #stbl .tbl td:nth-last-child(2) { grid-area: off; font-size: 14px; }
  .msl-stock #stbl .tbl td:last-child { grid-area: act; justify-self: end; }
  .msl-stock #stbl .prod > div > b { font-size: 14.5px; line-height: 1.3; }
  .msl-stock #stbl .prod > div > span { font-size: 12px; overflow-wrap: anywhere; }
  .msl-stock #stbl .stk { min-width: 0; }
  .msl-stock #stbl .stk b { font-size: 15px; }
  .msl-stock #stbl .inc { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
  .msl-stock #stbl .stat-chip { font-size: 11px; }
  .msl-stock #stbl .tbl td:last-child .btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
  .msl-stock #stbl .tbl td:last-child .btn-s { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--primary-subtle); color: var(--primary); }
  .msl-stock #stbl > .pager { padding: 12px 2px 0; border-top: 0; }
  .msl-stock #stbl .pager > .muted { flex-basis: 100%; order: 3; font-size: 12px; }
  .msl-stock .pager .seg button, .msl-orders .pager .seg button { min-width: 44px; justify-content: center; }
  /* Kosár: telefonon alulról nyíló lap; a ragadós kosár-sáv az alsó sáv fölött nyitja. */
  .msl-stock #cartw:not(.msl-open) { display: none; }
  .msl-stock #cartw.msl-open { gap: 0; padding: 0; overflow: hidden; }
  .msl-stock #cartw .cart { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); }
  /* A lap törzse (a kosár-sorok) görget; a fejléc és a gombsor a görgetőn kívül, mindig látszik (nincs alájuk csúszó sor). */
  .msl-stock #cartw .msl-cls { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .msl-stock #cartw .cart-h { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 6px 8px; padding: 20px 8px 12px 16px; background: var(--surface); }
  .msl-stock #cartw .cart-h > .thumb { display: none; }
  .msl-stock #cartw .cart-h > div { grid-column: 1; grid-row: 1; min-width: 0; }
  .msl-stock #cartw .cart-h h2 { font-size: 17px; }
  .msl-stock #cartw .cart-h .muted { font-size: 13px; }
  .msl-stock #cartw .cart-h > .msl-x.mob-only { display: grid !important; grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .msl-stock #cartw .cart-h > [data-a="cart-clear"] { grid-column: 1; grid-row: 2; justify-self: start; margin: 0 0 0 -12px; }
  .msl-stock #cartw .cart-gh { padding: 8px 16px; font-size: 12.5px; }
  .msl-stock #cartw .cart-l { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 44px; grid-template-areas: "prod prod del" "ig cav cav"; gap: 8px 10px; padding: 10px 8px 12px 16px; border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border)); }
  .msl-stock #cartw .cart-l > .prod { grid-area: prod; }
  .msl-stock #cartw .cart-l > .prod b { font-size: 14px; line-height: 1.3; }
  .msl-stock #cartw .cart-l > .ig { grid-area: ig; }
  .msl-stock #cartw .cart-l > .ig .input { height: 44px; }
  .msl-stock #cartw .cart-l > .cav { grid-area: cav; grid-column: auto; }
  .msl-stock #cartw .cart-l > .ic-btn { grid-area: del; width: 44px; height: 44px; }
  .msl-stock #cartw .cart-l .av-warn { white-space: normal; line-height: 1.3; }
  .msl-stock #cartw .cart-f { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 12px 16px 14px; margin-top: auto; background: var(--surface); border-top: 1px solid var(--border); font-size: 12.5px; }
  .msl-stock #cartw .cart-f .act { grid-column: 1 / -1; display: flex; gap: 8px; margin: 0; }
  .msl-stock #cartw .cart-f .act > .btn { flex: 1 1 0; min-width: 0; min-height: 48px; white-space: normal; line-height: 1.2; }
  .msl-stock #cartw.msl-open { padding-bottom: 0; }
  .msl-stock #mslcb.mob-only { display: contents !important; }
  .msl-stock .msl-cbar.mob-only { display: flex !important; position: fixed; left: 8px; right: 8px; bottom: calc(var(--mob-also) + 8px); z-index: 90; align-items: center; gap: 10px; min-height: 60px; padding: 8px 8px 8px 10px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4); font: inherit; text-align: left; cursor: pointer; }
  .msl-stock .msl-cbar .thumb { width: 40px; height: 40px; }
  .msl-stock .msl-cbt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .msl-stock .msl-cbt b { font-size: 14.5px; }
  .msl-stock .msl-cbt small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msl-stock .msl-cbar .btn { pointer-events: none; }
  .msl-stock:has(.bulk) .msl-cbar.mob-only { display: none !important; }
  .msl-stock:has(.msl-cbar) { padding-bottom: 80px; }

  /* ── AJÁNLATOK LISTA: a sorok érinthető kártyák ───────────────────────────────────────────────────────── */
  .msl-offers .page-h .xrange, .msl-offers .page-h [data-a="export"], .msl-offers .msl-xnote { display: none; }
  .msl-offers .page-h .act { display: flex; gap: 8px; }
  .msl-offers .page-h .act > .btn { flex: 1 1 0; min-width: 0; }
  .msl-offers .page-h .act > [data-a="new"] { order: -1; }
  .msl-offers #olist > .card { padding: 0; background: transparent; border: 0; box-shadow: none; }
  .msl-offers #olist .tw { overflow: visible; }
  .msl-offers .otbl, .msl-offers .otbl tbody { display: block; }
  .msl-offers .otbl thead { display: none; }
  .msl-offers .otbl tr.clk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "id amt menu" "part part part" "st st st" "type type type" "dt own own" "tags inv inv"; gap: 6px 10px; align-items: center; margin: 0 0 10px; padding: 8px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .msl-offers .otbl tr.clk.sel { border-color: var(--primary); background: var(--primary-subtle); }
  .msl-offers .otbl tr.clk > td { display: block; order: 0; justify-self: stretch; min-width: 0; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; text-align: left; font-size: 13px; }
  .msl-offers .otbl tr.clk > td:nth-child(1) { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; }
  .msl-offers .otbl tr.clk > td:nth-child(2) { grid-area: id; padding: 6px 0 0 24px !important; }
  .msl-offers .otbl tr.clk > td:nth-child(2) .idc { font-size: 13.5px; }
  .msl-offers .otbl tr.clk > td:nth-child(3) { grid-area: own; justify-self: end; align-self: end; font-size: 12.5px; color: var(--text-2); }
  .msl-offers .otbl tr.clk > td:nth-child(4) { grid-area: part; }
  .msl-offers .otbl tr.clk > td:nth-child(4) .two b { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .msl-offers .otbl tr.clk > td:nth-child(4) .two span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msl-offers .otbl tr.clk > td:nth-child(5) { grid-area: dt; font-size: 12.5px !important; color: var(--text-2); }
  .msl-offers .otbl tr.clk > td:nth-child(5) > span { display: inline !important; }
  .msl-offers .otbl tr.clk > td:nth-child(5) > span::before { content: ' → '; color: var(--muted); }
  .msl-offers .otbl tr.clk > td:nth-child(6) { grid-area: st; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .msl-offers .otbl tr.clk > td:nth-child(6) > span.muted { display: inline !important; margin: 0 !important; font-size: 12px !important; }
  .msl-offers .otbl tr.clk > td:nth-child(7) { grid-area: tags; }
  .msl-offers .otbl tr.clk > td:nth-child(7):has(> .otags > .muted:only-child) { display: none; }
  .msl-offers .otbl tr.clk > td:nth-child(8) { grid-area: amt; justify-self: end; align-self: start; padding-top: 6px; text-align: right; font-size: 15px; }
  .msl-offers .otbl tr.clk > td:nth-child(8) small { font-size: 11.5px; }
  .msl-offers .otbl tr.clk > td:nth-child(9) { grid-area: inv; justify-self: end; text-align: right; }
  .msl-offers .otbl tr.clk > td:nth-child(9):has(> .muted:only-child) { display: none; }
  .msl-offers .otbl tr.clk > td:nth-child(10) { grid-area: type; }
  .msl-offers .otbl tr.clk > td:nth-child(10) .inc { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .msl-offers .otbl tr.clk > td:nth-child(10) .inc .muted { font-size: 12px !important; }
  .msl-offers .otbl tr.clk > td:nth-child(11) { grid-area: menu; align-self: start; margin: -4px -8px 0 0; }
  .msl-offers .otbl tr.clk > td:nth-child(11) .ic-btn { width: 44px; height: 44px; }
  .msl-offers .otags { gap: 4px; max-width: none; }
  .msl-offers .lx-bsub { font-size: 11.5px; }
  .ov .tagpick-i { min-height: 44px; padding: 8px 12px; }
  .msl-stock .kring text { font-size: 11px; }
  .msl-offers .opager { flex-wrap: wrap; gap: 8px; padding: 10px 4px 0; border-top: 0; }
  .msl-offers .opager select.input { height: 44px; width: 84px; }
  .msl-offers .opager .grow { flex: 1 1 100%; }
  .msl-offers .opager .pager { padding: 0; justify-content: center; }

  /* ── AJÁNLAT-SZERKESZTŐ ───────────────────────────────────────────────────────────────────────────────── */
  .msl-oed { padding-bottom: 104px; }
  .msl-oed .crumb a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; font-weight: 600; color: var(--text-2); }
  .msl-oed .page-h { margin-top: -6px !important; }
  .msl-oed .page-h h1 { flex-wrap: wrap; gap: 6px 10px !important; font-size: 22px; }
  .msl-oed .page-h h1 > span[style] { flex: 1 1 100%; font-size: 14px !important; line-height: 1.35; }
  .msl-oed #savest { display: none; }
  /* Ragadós műveletsáv az alsó sáv fölött: mentés-állapot · Előnézet · Küldés · További (a PDF a További menüben). */
  .msl-oed .page-h .act { position: fixed; left: 0; right: 0; bottom: var(--mob-also); z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 44px; grid-template-areas: "sv sv sv" "pv send more"; align-items: center; gap: 6px 8px; width: auto; margin: 0; padding: 8px 12px 10px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0, 0, 0, .12); }
  .msl-oed .msl-sv.mob-only { grid-area: sv; display: block !important; font-size: 12px; line-height: 1.3; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msl-oed .msl-sv.is-saving { color: var(--warn); }
  .msl-oed .page-h .act > [data-a="preview"] { grid-area: pv; }
  .msl-oed .page-h .act > [data-a="send"] { grid-area: send; }
  .msl-oed .page-h .act > [data-a="more"] { grid-area: more; width: 44px; height: 44px; border-radius: var(--r-md); }
  .msl-oed .page-h .act > .msl-pdf { display: none; }
  .msl-oed .page-h .act:not(:has(> [data-a="send"])) > [data-a="preview"] { grid-column: 1 / 3; }
  .msl-oed .page-h .act > .btn { min-width: 0; padding: 0 10px; }
  .msl-oed .fg2, .msl-oed .fg3, .msl-oed .otype, .msl-oed .splitp { grid-template-columns: minmax(0, 1fr); }
  .msl-oed .seg-lang { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .msl-oed .seg-lang::-webkit-scrollbar { display: none; }
  .msl-oed .seg-lang button { flex: 0 0 auto; min-width: 44px; justify-content: center; }
  .msl-oed .rte-t button { min-width: 40px; height: 40px; }
  .msl-oed .rte-t small { font-size: 11.5px; }
  .msl-oed .rte-b { font-size: 16px; min-height: 110px; }
  .msl-oed .otype button { min-height: 56px; padding: 12px 14px; }
  .msl-oed .otype button span { font-size: 12.5px; }
  .msl-oed #linesc > .card-h .r { flex: 1 1 100%; margin-left: 0; }
  .msl-oed #linesc > .card-h .r .btn { width: 100%; }
  .msl-oed .tbar { position: sticky; top: calc(var(--mob-top-h) + var(--mob-safe-top)); z-index: 5; gap: 6px; padding: 8px 12px; }
  .msl-oed .tbar > .sp.muted { display: none; }
  /* Tétel-kártya: termék · elérhetőség · mennyiség / egységár / kedvezmény (hüvelykujjal) · ÁFA · nettó. */
  .msl-oed #linesc .tw { overflow: visible; }
  .msl-oed .lines, .msl-oed .lines tbody { display: block; }
  .msl-oed .lines thead { display: none; }
  .msl-oed .lines tr[data-lid] { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)) 44px; grid-template-areas: "ck prod prod prod del" "mv av av av del" "mv qty qty disc disc" ". price price vat vat" ". net net net net"; align-items: end; gap: 8px; padding: 12px 12px 14px 4px; border-bottom: 1px solid var(--border); }
  .msl-oed .lines tr[data-lid]:last-child { border-bottom: 0; }
  .msl-oed .lines tr[data-lid] > td { display: block; min-width: 0; padding: 0 !important; border: 0; background: transparent !important; box-shadow: none !important; opacity: 1; }
  .msl-oed .lines tr.sel { background: var(--primary-subtle); box-shadow: inset 3px 0 0 var(--primary); }
  .msl-oed .lines tr.conf { background: var(--bad-bg); box-shadow: inset 3px 0 0 var(--bad); }
  .msl-oed .lines tr[data-lid] > td:nth-child(1) { grid-area: mv; align-self: start; }
  .msl-oed .lines tr[data-lid] > td:nth-child(2) { grid-area: ck; align-self: start; display: grid; place-items: center; width: 44px; min-height: 44px; }
  .msl-oed .lines tr[data-lid] > td:nth-child(3) { grid-area: prod; align-self: start; }
  .msl-oed .lines tr[data-lid] > td:nth-child(4) { grid-area: av; align-self: center; }
  .msl-oed .lines tr[data-lid] > td:nth-child(5) { grid-area: qty; }
  .msl-oed .lines tr[data-lid] > td:nth-child(6) { grid-area: price; }
  .msl-oed .lines tr[data-lid] > td:nth-child(7) { grid-area: disc; }
  .msl-oed .lines tr[data-lid] > td:nth-child(8) { grid-area: vat; }
  .msl-oed .lines tr[data-lid] > td:nth-child(9) { grid-area: net; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding-top: 4px !important; border-top: 1px dashed var(--border) !important; font-size: 15px; font-weight: 700; white-space: normal; text-align: right; }
  .msl-oed .lines tr[data-lid] > td:nth-child(9) .msl-l { margin: 0; }
  .msl-oed .lines tr[data-lid] > td:nth-child(10) { grid-area: del; align-self: start; }
  .msl-oed .lines tr[data-lid] > td:nth-child(10) .ic-btn { width: 44px; height: 44px; }
  .msl-oed .lines .dragh { display: none; }
  .msl-oed .lines .msl-mv.mob-only { display: flex !important; flex-direction: column; align-items: center; gap: 4px; }
  .msl-oed .lines .msl-mv .ic-btn { width: 40px; height: 40px; color: var(--text-2); }
  .msl-oed .lines .msl-mv .ic-btn:disabled { opacity: .3; }
  .msl-oed .lines .msl-up svg { transform: rotate(180deg); }
  .msl-oed .lines .prod { min-width: 0; align-items: flex-start; }
  .msl-oed .lines .prod > div { min-width: 0; }
  .msl-oed .lines .prod > div > b { font-size: 14px; line-height: 1.3; }
  .msl-oed .lines .prod > div > span { font-size: 12px; overflow-wrap: anywhere; }
  .msl-oed .lines .avc { min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .msl-oed .lines .conf-tag { max-width: none; font-size: 12px; }
  .msl-oed .lines .input, .msl-oed .lines .q-in, .msl-oed .lines .p-in, .msl-oed .lines .d-in, .msl-oed .lines .v-in { width: 100%; height: 44px; padding: 0 8px; }
  .msl-oed .lines .ig-a { padding: 0 7px; font-size: 12px; }
  .msl-oed .lines .hint { display: block; margin-top: 3px; font-size: 11.5px; }
  .msl-oed .lfoot-g { padding: 14px; gap: 16px; }
  .msl-oed #tdv { max-width: none !important; flex: 1 1 auto; }
  .msl-oed .lfoot-g .seg button { min-width: 44px; justify-content: center; }
  .msl-oed .pp-card .grp-s h3 { font-size: 12px; }
  .msl-oed .pp-card .tbl-w { overflow: visible; }
  .msl-oed .pp-ltbl, .msl-oed .pp-ltbl tbody { display: block; }
  .msl-oed .pp-ltbl thead { display: none; }
  .msl-oed .pp-ltbl tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
  .msl-oed .pp-ltbl tr:last-child { border-bottom: 0; }
  .msl-oed .pp-ltbl td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 13px; }
  .msl-oed .pp-ltbl td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; }
  .msl-oed .pp-ltbl td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
  .msl-oed .pp-ltbl td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .msl-oed .pp-ltbl td:has(> .chk-l) { grid-column: 3; grid-row: 2; }
  .msl-oed .pp-ltbl td:has([data-pl="qty_min"]) { grid-column: 2; grid-row: 3; }
  .msl-oed .pp-ltbl td:has([data-pl="qty_max"]) { grid-column: 3; grid-row: 3; }
  .msl-oed .pp-ltbl .pp-num { width: 100%; height: 44px; }
  .msl-oed .pp-ltbl .chk-l { min-height: 44px; }
  .msl-oed .tot { font-size: 14px; }
  .msl-oed .tot .big { font-size: 19px; }
  .msl-oed .tot .num { overflow-wrap: anywhere; }
  .msl-oed .alert .row .btn { flex: 1 1 auto; }
  .msl-oed .tl-i time { font-size: 11.5px; }
  .msl-oed .tplm { display: none; }

  /* ── CÍMKÉK ÉS PARTNEROLDAL ──────────────────────────────────────────────────────────────────────────── */
  .msl-setup form[data-a="tadd"] > .field { flex: 1 1 100%; }
  .msl-setup form[data-a="tadd"] #tn { width: 100% !important; }
  .msl-setup form[data-a="tadd"] > .btn { flex: 1 1 100%; }
  .msl-setup #tagsc .tw { overflow: visible; }
  .msl-setup #tagsc .tbl, .msl-setup #tagsc .tbl tbody { display: block; }
  .msl-setup #tagsc .tbl thead { display: none; }
  .msl-setup #tagsc .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .msl-setup #tagsc .tbl tr:last-child { border-bottom: 0; }
  .msl-setup #tagsc .tbl td { display: block; min-width: 0; padding: 0; border: 0; }
  .msl-setup #tagsc .tbl td.r { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
  .msl-setup #tagsc .tbl td[colspan] { grid-column: 1 / -1; }
  .msl-setup #tagsc .tbl td[colspan] ~ td.r { grid-column: 1 / -1; grid-row: auto; }
  .msl-setup #tagsc .tbl td[colspan] ~ td.r .btn { flex: 1 1 0; }
  .msl-setup #tagsc .tbl #te-name { max-width: none !important; }
  .msl-setup #tagsc .tbl td.muted { font-size: 12.5px !important; }
  .msl-setup #tagsc .tbl .ic-btn { width: 44px; height: 44px; }
  .msl-setup .fg2 { grid-template-columns: minmax(0, 1fr); }
  .msl-setup .cprev-h { flex-wrap: wrap; }
  .msl-setup #compc .row > .btn.sp { flex: 1 1 100%; }
  .msl-setup #lx-ttags .seg { display: flex; width: 100%; }
  .msl-setup #lx-ttags .seg button { flex: 1 1 0; justify-content: center; }
  .msl-setup #lx-ttags .lx-tt { align-items: center; }
  .msl-setup #lx-ttags .lx-ttd { width: 40px; height: 40px; }
  .msl-setup #lx-ttags form .input { max-width: none !important; flex: 1 1 140px; }
  .msl-setup #lx-ttags .row > .btn { white-space: normal; height: auto; line-height: 1.25; padding: 8px 12px; text-align: left; }

  /* ── RENDELÉSEK ───────────────────────────────────────────────────────────────────────────────────────── */
  .msl-orders #syncs { display: flex; flex-wrap: wrap; gap: 8px; }
  .msl-orders #syncs > .sync { flex: 1 1 auto; justify-content: center; height: 34px; font-size: 12.5px; }
  .msl-orders #syncs > .btn { flex: 1 1 100%; }
  .msl-orders .card-h > .r { flex: 1 1 100%; margin-left: 0; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .msl-orders .card-h > .r select, .msl-orders .card-h > .r .search { width: 100% !important; max-width: none !important; }
  .msl-orders section.card:has(> #rlist) { background: transparent; border: 0; box-shadow: none; }
  .msl-orders section.card:has(> #rlist) > .card-h { padding: 2px 2px 12px; border-bottom: 0; }
  .msl-orders #rlist .tw { overflow: visible; }
  .msl-orders .otbl, .msl-orders .otbl tbody { display: block; }
  .msl-orders .otbl thead { display: none; }
  .msl-orders .otbl tr.clk { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id src" "part own" "pay amt" "sup task" "msg msg"; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 12px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .msl-orders .otbl tr.clk:last-child { margin-bottom: 0; }
  .msl-orders .otbl tr.clk.sel { border-color: var(--primary); background: var(--primary-subtle); }
  .msl-orders .otbl tr.clk > td { display: block; order: 0; justify-self: stretch; min-width: 0; padding: 0; border: 0; background: transparent !important; text-align: left; }
  .msl-orders .otbl tr.clk > td:nth-child(1) { grid-area: id; }
  .msl-orders .otbl tr.clk > td:nth-child(1) .idc { font-size: 14px; }
  .msl-orders .otbl tr.clk > td:nth-child(1) .idc small { font-size: 12px; }
  .msl-orders .otbl tr.clk > td:nth-child(2) { grid-area: src; justify-self: end; }
  .msl-orders .otbl tr.clk > td:nth-child(2) a.src { min-height: 40px; }
  .msl-orders .otbl tr.clk > td:nth-child(3) { grid-area: part; }
  .msl-orders .otbl tr.clk > td:nth-child(3) .two b { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .msl-orders .otbl tr.clk > td:nth-child(3) .two span { font-size: 12.5px; }
  .msl-orders .otbl tr.clk > td:nth-child(4) { grid-area: own; justify-self: end; }
  .msl-orders .otbl tr.clk > td:nth-child(5) { grid-area: amt; justify-self: end; text-align: right; font-size: 15px; }
  .msl-orders .otbl tr.clk > td:nth-child(5) small { font-size: 11.5px; }
  .msl-orders .otbl tr.clk > td:nth-child(6) { grid-area: pay; }
  .msl-orders .otbl tr.clk > td:nth-child(7) { grid-area: sup; }
  .msl-orders .otbl tr.clk > td:nth-child(8) { grid-area: task; justify-self: end; display: flex; align-items: center; gap: 6px; }
  .msl-orders .otbl tr.clk > td:nth-child(8) .msl-l { margin: 0; }
  .msl-orders .otbl tr.clk > td:nth-child(9) { grid-area: msg; display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
  .msl-orders .otbl tr.clk > td:nth-child(9):has(.msgc-z) { display: none; }
  .msl-orders .otbl tr.clk > td:nth-child(9) .msl-l { margin: 0; }
  .msl-orders .otbl .msgc { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 8px; width: auto; min-width: 0; }
  .msl-orders .otbl .msgc-t { flex: 1 1 auto; min-width: 0; font-size: 12px; }
  .msl-orders .otbl .dpl { white-space: normal; font-size: 12px; }
  .msl-orders #rlist > .pager { padding: 12px 2px 0; border-top: 0; }
  .msl-orders .otbl .dpl small { font-size: 11px; }
  .msl-orders .feed { grid-template-columns: 44px 26px minmax(0, 1fr); gap: 4px 8px; padding: 10px 14px; font-size: 13px; }
  .msl-orders .feed > :last-child { grid-column: 3; }
  .msl-orders .feed b > a { display: inline-flex; align-items: center; min-height: 40px; }
  /* A részletek-fiók telefonon teljes magasságú lap (fejléc + saját görgetés). */
  .drawer.msl-odw { height: 92dvh; }
  .msl-odw .dw-h h2 { font-size: 17px; }
  .msl-odw .dkv { grid-template-columns: 110px minmax(0, 1fr); font-size: 13.5px; }
  .msl-odw .dkv dt { font-size: 12px; }
  .msl-odw .dsum b { font-size: 14px; }
  .msl-odw .dsum > div.on b { font-size: 17px; }
  .msl-odw .fg2 { grid-template-columns: minmax(0, 1fr); }
  .msl-odw .task { grid-template-columns: 30px minmax(0, 1fr); font-size: 13px; }
  .msl-odw .task > select, .msl-odw .task > .pill { grid-column: 2; justify-self: start; }
  .msl-odw .task select { height: 40px; width: auto; min-width: 160px; }
  .msl-odw .task > div > span { font-size: 12px; }
  .msl-odw .tform .row .btn { flex: 1 1 100%; margin-left: 0; }
  .msl-odw .tform .input, .msl-odw form[data-f="proforma"] .input { height: 44px; }
  .msl-odw a.src { min-height: 40px; }
  .msl-odw .tl-i { font-size: 13.5px; }
  .msl-odw .tl-i > div > span:not(.src2) { font-size: 12px; }
  .msl-odw .eq { flex-wrap: wrap; font-size: 12px; }
  /* Az ajánlat elküldése után a link-modál: a mező teljes szélességben, alatta a két gomb. */
  .ov .pubbox { flex-wrap: wrap; }
  .ov .pubbox .input { flex: 1 1 100%; }
  .ov .pubbox .btn { flex: 1 1 0; }
  .ov .modal:has(#isq) .ires { flex: 0 0 auto; max-height: none; overflow: visible; } /* egy gorgeto: a lap torzse (a lista nem nyomodik ossze) */
  .ov .modal:has(#isq) .search input { height: 42px; }
  .ov .modal:has(#isq) .ires .ir { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .ov .modal:has(#isq) .ires .ir > .row .input { width: 110px !important; }
  .ov .modal:has(#isq) .ires .ir > .row .btn { flex: 1 1 auto; }
}

/* MONDAY (2026-10-12): a Monday statusz-oszlopainak szines chipje a lead-tablaban. A szin a Monday sajat
   labels_colors erteke; a betuszin a hatter vilagossagabol szamolt (vilagos chipen sotet betu). */
.mt-t td.mt-mcell { padding: 3px 6px; }
.m-chip { display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: 12px;
          font-weight: 600; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* MONDAY-SCROLL2 (2026-10-12): a lead-tabla vizszintes gorditosavja MINDIG latszodjon, a tabla ALJAN.
   A gordito a .mt-scroll (EZ viszi egyutt az osszes csoportot) -- korabban tevesen a .mt-g-re tettem, ami
   csoportonkent kulon gorditot csinalt, es ezzel a kozos savot ki is ollte. A bongeszok overlay-savja
   alapbol elrejtozik; az explicit ::-webkit-scrollbar ezt kikapcsolja (Chrome/Safari), a scrollbar-width
   es -color a Firefoxot fedi le. */
/* ⚠ Chrome 121+ a SZABVANYOS scrollbar-width/-color-t hasznalja, es ilyenkor a ::-webkit-scrollbar szabalyokat
   FIGYELMEN KIVUL hagyja. A korabbi 'thin' + halvany szin ezert egy alig lathato 10px-es csikot adott.
   Most: auto vastagsag + eros kontrasztu hvelyk. A ::-webkit blokk a regi Chrome-oknak marad tartaleknak. */
.mt-scroll { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--text) 45%, var(--surface)) var(--surface-2); }
.mt-scroll::-webkit-scrollbar { height: 14px; }
.mt-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; margin: 0 8px; }
.mt-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--surface-2); min-width: 48px; }
.mt-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* 2026-10-12 (Brandocs-betoltes): a Brandocsbol betoltott (csak olvashato) ajanlat jelvenye a listaban es a sav a szerkesztoben. */
.bd-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 17px; vertical-align: 1px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.bd-ban .bd-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 12px; }
.bd-ban .bd-dl dt { color: var(--muted); }
.bd-ban .bd-dl dd { margin: 0; }

/* MONDAY-SCROLL3 (2026-10-13): a vizszintes gorditosav ELERHETO legyen.
   A .mt-scroll az OSSZES csoportot burkolja -> 7800+ px magas volt, a sav a lathato resz alatt 6500 px-rel ult.
   Megoldas: a tabla sajat, kepernyobe fero doboza legyen (sajat fuggoleges gordites), igy a vizszintes sav
   a doboz aljan, mindig latható helyen marad. A fejlec ragad, kulonben 40 oszlopnal elveszne gorgetes kozben. */
.mt-scroll { max-height: calc(100vh - 340px); min-height: 380px; overflow: auto; overscroll-behavior: contain; }
.mt-t thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.mt-g .mt-gh { position: sticky; left: 0; z-index: 2; }

/* SORREND (2026-10-14): a lead-sor fogantyuja (huzasra a sorrend modosul) es a kanban-kartya / tabla-sor celvonala. */
.mt-grip { flex: none; display: inline-flex; align-items: center; margin-left: -4px; color: var(--text-2); cursor: grab; opacity: .35; border-radius: 4px; }
.mt-t tbody tr.lead-r:hover .mt-grip, .mt-grip:focus-visible { opacity: 1; }
.mt-grip:active { cursor: grabbing; }
.mt-t tbody tr.lead-r.dragging td { opacity: .45; }
.mt-t tbody tr.lead-r.drop-above td { box-shadow: inset 0 2px 0 var(--primary); }
.mt-t tbody tr.lead-r.drop-below td { box-shadow: inset 0 -2px 0 var(--primary); }
.m-card.drop-above { box-shadow: 0 -3px 0 var(--primary); }
.m-card.drop-below { box-shadow: 0 3px 0 var(--primary); }
@media (hover: none) { .mt-grip { display: none; } }

/* SUPPLY-CHAT (2026-10-20): a Supply OS kerdesei a rendeles-fiokban (views/order-chat.js) + a Rendelesek "Supply-üzenetek" listaja. */
.schat .card-b { padding-top: 8px; }
.schat-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px 2px 6px; }
.schat-m { max-width: 86%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; background: var(--surface-2); font-size: 12.5px; }
.schat-m.in { align-self: flex-start; }
.schat-m.out { align-self: flex-end; background: var(--primary-subtle); border-color: transparent; }
.schat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.schat-meta b { color: var(--text); font-weight: 600; }
.schat-meta time { margin-left: auto; font-family: var(--font-mono); }
.schat-src { color: var(--info); }
.schat-b { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.schat-form { margin-top: 10px; display: grid; gap: 6px; }
.schat-form textarea { min-height: 64px; resize: vertical; }
.schat-form .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
/* 2. kor (2026-10-20): a Sales-uzenet cimzettje Enrique / Dani (legalabb egy). */
.schat-to { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; }
.schat-to-l { font-weight: 600; }
.schat-to label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
[data-schat="inbox"] .schat-n { position: static; margin-left: 4px; }
.schat-rows { display: flex; flex-direction: column; }
.schat-row { display: grid; gap: 2px; padding: 9px 4px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 12.5px; }
.schat-row:last-child { border-bottom: 0; }
.schat-row:hover { background: var(--surface-2); }
.schat-row.un .schat-row-h b { color: var(--primary); }
.schat-row-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.schat-row-h time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.schat-row-t { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .schat-m { max-width: 100%; } .schat-list { max-height: none; } }