/* Sales OS -- DASH terulet (2026-10-07): a Vezerlopult, a verseny es a havi cel kiegeszitesei. Csak tokenek
 * (vilagos es sotet mod a tokens.css-bol); a sales.css UTAN toltodik, ezert a "Vált." oszlop lathatosaga itt
 * felulirhato. */

/* Idoszak-chipek a fejlecben: 8 opcio, tordelve. */
.e-pchips { justify-content: flex-end; }
.e-pchips .chip { height: 28px; font-size: 12px; }

/* Bevetel-kartya labresze: magyarazat + 24/12/6/3 honap valto. */
.e-revf { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.e-revf .seg { margin-left: auto; }

/* Nyeremeny-szerkeszto: a "mindenki" sor strukturalt bonusza. */
.e-pzb { grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-2); }
.e-pzb .input { width: 110px; }
.e-pzb .input.e-pzbr { width: 70px; }
.e-pzb .muted { flex-basis: 100%; font-size: 11px; }

/* Jutalekom-widget: bonusz-allas sava. */
.e-bon .bar > i { background: var(--ton-amber); }
.e-bon svg { width: 12px; height: 12px; vertical-align: -1px; color: var(--ton-amber); }

/* Havi celok (Beallitasok). */
.e-tg { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 6px 12px; align-items: center; }
.e-tg .e-tgn { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.e-tg .e-tgn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-tg .input { text-align: right; }
.e-tg .input.err { border-color: var(--bad); background: var(--bad-bg); }

/* "Vált." oszlop: kozepes szelessegen az "Ügylet" oszlop adja at a helyet (a valtozas a lenyeg), telefonon is latszik. */
.e-lr > .e-chg { display: block; }
@media (max-width: 1240px) and (min-width: 641px) {
  .e-lr > :nth-child(7) { display: block; }
  .e-lr > :nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .e-pchips { justify-content: flex-start; }
  .e-lr { grid-template-columns: 18px 24px minmax(0, 1fr) 84px 30px; }
  .e-lr > :nth-child(7) { display: block; }
  .e-pzb { grid-column: 1 / -1; }
  .e-tg { grid-template-columns: minmax(0, 1fr) 120px; }
}

/* DASH E2E (2026-10-08): a fejlec idoszaka es az osszevetes alapja kulon sorban; a vezeto Csapat / Sajat valtoja. */
.page-h .e-ph b { font-weight: 600; color: var(--text); }
.page-h .e-cmp { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.page-h .e-cmp svg { width: 12px; height: 12px; flex: none; }
.e-scope { flex: none; }
@media (max-width: 640px) { .e-scope { width: 100%; } .e-scope button { flex: 1; } }

/* ══ MOBIL (MOB-SHELL, 2026-10-08): a Vezérlőpult telefonon Péter Supply OS mobil-grafikája szerint ══════════════
 * cím + alcím; gyorselérés-csempék oldalra görgethető sávban; az időszak-chipek és a Csapat/Saját váltó EGY sorban
 * (oldalra görget); KPI-kártyák 2 oszlopban, alul „frissítve 14:05 ⓘ” (az ⓘ a részleteket nyitja); kiegészítő
 * mutatók 4 oszlopos mini-csempékként; a teendők soronként ikon + szöveg + nyíl; a grafikonok és a verseny teljes
 * szélességben. Asztalon (≥768px) semmi nem hat (a .mob-only elemek rejtettek). */
@media (max-width: 767px) {
  .page-h .e-act { flex-wrap: nowrap; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; width: auto; }
  .page-h .e-act .e-pchips { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
  .page-h .e-act .e-pchips .chip { height: 40px; font-size: 13px; }
  .page-h .e-act .e-scope { width: auto; flex: 0 0 auto; }
  .page-h .e-act .e-scope button { flex: 0 0 auto; }
  .page-h .e-ph, .page-h .e-cmp { font-size: 13px; }

  /* Gyorselérés-csempék (a grafika 2. pontja) */
  /* A grafika szerint kozvetlenul a cim (es az idoszak-sor) alatt, az idoszak-chipek ELOTT; kompakt csempek: >=375 px-en
     mind az 5 kifer gorgetes nelkul, 360 px-en beugro gorgetessel (a sor jobb szele halvanyul, ha van meg). */
  .qt.mob-only { display: flex !important; gap: 5px; margin: 2px -16px 0; padding: 0 16px 2px; }
  .qt-i { flex: 1 1 0; min-width: 64px; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 3px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 80%); color: var(--text); font: 500 12px/1.2 var(--font-ui); text-align: center; text-decoration: none; box-shadow: inset 0 1px 0 var(--hl), var(--widget-shadow); }
  .qt-i svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ton-orange); }
  .qt-i span { max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
  .qt-i.qt-p { border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 70%), var(--primary-subtle); color: var(--primary); font-weight: 700; }
  .qt-i.qt-p svg { color: var(--primary); }

  /* KPI-kártya a grafika szerint: a nagybetűs címke a teljes szélességet kapja, az ikon-kör a SZÁM sorában jobbra
     (így a hosszú szó -- MEGRENDELÉSI, BESTELLQUOTE -- sem fut az ikon alá). */
  .e-kpis .kpi { grid-template-columns: minmax(0, 1fr) 38px; grid-template-areas: "l l" "v ico" "s s" "f f"; column-gap: 6px; }
  .e-kpis .kpi .ico { width: 38px; height: 38px; align-self: center; }
  .e-kpis .kpi .l { align-self: start; min-height: 2.6em; }
  .e-kpis .kpi .v { align-self: center; margin-top: 4px; font-size: 22px; overflow-wrap: anywhere; }
  /* KPI-kártya lába: „frissítve 14:05 ⓘ”; a részletek (változás, magyarázat) az ⓘ-re nyílnak */
  .kpi > .kpi-f.mob-only { grid-area: f; display: flex !important; align-items: center; gap: 6px; width: calc(100% + 8px); min-height: 40px; margin: 6px -4px -6px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 500 12px/1.2 var(--font-ui); text-align: left; }
  .kpi > .kpi-f svg { width: 15px; height: 15px; flex: 0 0 auto; }
  .kpi > .kpi-f[aria-expanded="true"] { color: var(--text-2); }
  .kpi:has(> .kpi-f):not(.open) .s { display: none; }

  /* Kiegészítő mutatók: 4 oszlopos mini-csempék (a grafika 6. pontja) */
  .mt4.mob-only { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mt-i { display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; min-width: 0; min-height: 64px; padding: 9px 8px 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 80%); color: var(--text); text-decoration: none; }
  .mt-i b { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .mt-i span { font-size: 11px; line-height: 1.25; color: var(--text-2); overflow-wrap: anywhere; hyphens: auto; }

  /* Teendők és készlet-jelzések: ikon + szöveg + jobbra nyíl, az egész sor érinthető */
  .li { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; min-height: 56px; padding: 10px 12px 10px 14px; font-size: 13.5px; }
  .li .ci { width: 34px; height: 34px; }
  .li .s { font-size: 12px; }
  .li > .li-chev.mob-only { display: grid !important; place-items: center; color: var(--muted); }
  .li > .btn { min-height: 32px; height: 32px; padding: 0 10px; font-size: 12px; }

  /* Tölcsér, bevétel, státusz-kör */
  .fun-r { grid-template-columns: 84px minmax(0, 1fr) 78px; gap: 8px; font-size: 13px; }
  .fun-cv { padding-left: 92px; font-size: 11.5px; }
  .ctot { grid-template-columns: minmax(0, 1fr); }
  .ctot > button { min-height: 44px; font-size: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .ctot b { display: inline; font-size: 15px; }
  .e-revf { flex-direction: column; align-items: stretch; }
  .e-revf .seg { margin-left: 0; align-self: flex-start; }
  .chart-leg { font-size: 12.5px; }
  .dn text { font-size: 11px; }
  .donut .leg { width: 100%; font-size: 13px; grid-template-columns: 10px minmax(0, 1fr) auto 52px; }
  .donut .leg .link { min-height: 40px; }

  /* Értékesítői verseny: teljes szélesség, olvasható sorok */
  .e-tb { gap: 6px; }
  .e-tb .chip { height: 40px; padding: 0 11px; font-size: 13px; }
  .e-tb .chip svg { display: none; } /* a harom chip egy sorba fer 360 px-en is */
  .e-tb .e-rng { margin-left: 0; flex: 1 1 100%; white-space: normal; font-size: 12px; }
  .e-pod { padding: 0 2px; gap: 6px; }
  .e-pc > b { font-size: 13px; white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.25; }
  .e-pc .e-ps, .e-prize { font-size: 11.5px; }
  .e-amt { font-size: 12.5px; } .e-1 .e-amt { font-size: 14px; }
  .e-lr { grid-template-columns: 20px 26px minmax(0, 1fr) auto 34px; gap: 8px; padding: 8px 6px; font-size: 13px; }
  .e-lr > .bar, .e-lr > .e-d { display: none; }
  .e-lr > :nth-child(7) { display: block; }
  .e-lh > :nth-child(4), .e-lh > :nth-child(6) { display: none; }
  .e-mehint { font-size: 12.5px; }
  .e-pzh { flex-wrap: wrap; gap: 6px 10px; }
  .e-pzh label { flex: 1 1 100%; }
  .e-pzh .input { width: auto !important; flex: 1 1 auto; }
  .e-pzg { grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; }
  .e-pzg .e-pzr { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--text-2); }
  .e-pzg > input[data-pz="title"] { grid-column: 1 / -1; }
  .e-pzg .pzv { grid-column: 1; }
  .e-pzg .input, .e-pzb .input, .e-pzh .input { height: 44px; }
  .e-pzb .input { width: 100px; } .e-pzb .input.e-pzbr { width: 72px; }
  .e-pzlock { font-size: 11.5px; }
  .e-foot { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; font-size: 12px; } .e-foot > svg { margin-top: 1px; } .e-upd { grid-column: 2; margin-left: 0; }

  /* Jutalékom-widget */
  .e-jut .kpi { padding: 12px 12px 10px; }
  .e-goal, .e-prev, .e-cr { font-size: 12.5px; }
  .e-cri .mono { font-size: 11px; }
}