/* Sales OS -- Sablonok szerkeszto (TEMPLATES 2055): blokk-lista huzassal, fulek, tartalom-szerkesztok, e-mail
 * helyorzok, PDF (A4) elonezet. Csak a design-system tokenjei (vilagos / sotet mod a tokenekbol), 375 px-en egy oszlop. */
.tpl-chips { margin-bottom: 14px; }
.tpl-chips .chip svg { width: 13px; height: 13px; }
.tpl-use { font-size: 12px; margin-left: auto; }
.tb-hint { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.tb-list { list-style: none; margin: 0; padding: 4px 0; }
.tb-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; background: var(--surface); outline: none; }
.tb-row:last-child { border-bottom: 0; }
.tb-row:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.tb-row.hl { background: var(--primary-subtle); }
.tb-row.off .tb-name span { color: var(--muted); }
.tb-row.dragging { opacity: .45; }
.tb-row.drop-b { box-shadow: inset 0 2px 0 var(--primary); }
.tb-row.drop-a { box-shadow: inset 0 -2px 0 var(--primary); }
.tb-grip { color: var(--muted); cursor: grab; display: inline-flex; }
.tb-name { min-width: 0; flex: 1 1 auto; }
.tb-name span { display: block; font-weight: 600; }
.tb-name small { display: block; font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
.tb-mv { display: inline-flex; gap: 2px; }
.tb-mv .ic-btn { width: 24px; height: 24px; }
.tb-mv .ic-btn:disabled { opacity: .35; }
.tb-foot { font-size: 11px; margin: 0; padding: 8px 12px 12px; }
.tl-hint { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.tl-hint span { flex: 1 1 180px; }
.tpl-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--border); }
.tpl-tabs button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 7px 10px; border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.tpl-tabs button:hover { color: var(--text); }
.tpl-tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }
.tpl-act { gap: 6px; flex-wrap: wrap; }
.tpl-act .tpl-del { color: var(--bad); }
.tdec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tdec label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; }
.trev { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.trev .row { flex-wrap: nowrap; gap: 6px; }
.trev .row .input { flex: 1 1 auto; min-width: 0; }
.tlogos { display: flex; flex-wrap: wrap; gap: 8px; }
.tlogo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 48px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 4px; }
.tlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tlogo .ic-btn { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); }
.tfile { position: relative; overflow: hidden; align-self: flex-start; cursor: pointer; }
.tfile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tfile:focus-within { box-shadow: 0 0 0 2px var(--primary); }
.timg { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); }
.tyt { flex-wrap: nowrap; gap: 6px; }
.tyt .input { min-width: 0; flex: 1 1 50%; }
.tph { display: flex; flex-wrap: wrap; gap: 5px; }
.tph .chip { height: 26px; font-family: var(--font-mono); font-size: 11px; }
.tmail { font-size: 12px; line-height: 1.5; resize: vertical; }
.tmprev { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.tmprev b { font-size: 12.5px; overflow-wrap: anywhere; }
.tmprev pre { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.tphide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; font-size: 12px; }
/* Elo elonezet */
.tpv-page { transition: max-width var(--motion-fast); }
.tpv-mob { max-width: 340px; margin: 0 auto; }
.tpv-h .tpv-hr { margin-left: auto; text-align: right; }
.tpv-h.pl-right .logo { order: 3; }
.tpv-h.pl-right .tpv-hr { margin-left: auto; }
.tpv-h.pl-center { flex-direction: column; text-align: center; }
.tpv-h.pl-center .tpv-hr { margin-left: 0; text-align: center; }
.tpv-h.noacc { border-bottom: 1px solid var(--border); }
.tpv-greet p:first-child { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text); }
.tpv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpv-parties small { display: block; font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.tpv-sub td { background: var(--surface-2); color: var(--text-2); font-size: 10px; }
.tpv-h5 { margin: 0 0 4px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.tpv-q { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.tpv-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.tpv-revs figure { margin: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.tpv-revs blockquote { margin: 0; white-space: pre-line; }
.tpv-revs figcaption { color: var(--muted); font-size: 10px; margin-top: 3px; }
.tpv-logos { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; align-items: center; }
.tpv-logos img { max-height: 24px; max-width: 80px; object-fit: contain; filter: grayscale(1); }
.tpv-yt { display: flex; gap: 5px; align-items: center; color: var(--primary); }
.tpv-img { display: block; width: 100%; max-height: 160px; object-fit: cover; }
.tpv-empty { color: var(--muted); font-style: italic; font-size: 10.5px; }
.tpv-foot { background: var(--surface-2); color: var(--muted); font-size: 10px; border-bottom: 0; }
.tpv-pdfwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tpv-a4 { width: 100%; max-width: 420px; aspect-ratio: 210 / 297; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; }
.tpv-a4 .tpv-page { box-shadow: none; border: 0; font-size: 9px; }
.tpv-cap { font-size: 11px; margin: 0; }
@media (max-width: 640px) {
  .tpl-use { margin-left: 0; flex-basis: 100%; }
  .tpv-parties, .tphide { grid-template-columns: minmax(0, 1fr); }
  .tb-row { padding: 8px 10px; }
  /* E2E MASTER: a minta-tetelatabla 375 px-en vizszintesen gorgetheto (eddig levagta a jobb oldali oszlopokat). */
  .tpv-page { overflow-x: auto; }
  .tpv-page .cmini { min-width: 440px; }
}
/* Az Ajanlat-szerkeszto nyelvvalasztoja 10 nyelvvel (offer-editor.js .seg-lang): tordelheto. */
.seg.seg-lang { flex-wrap: wrap; max-width: 100%; }
.seg.seg-lang button { padding: 4px 7px; }
/* E2E TPL2 (2026-10-08): Általános (Aktív ettől, cégnév, válasz e-mail) es a fokapcsolo alatti Ármegjelenítés-sorok. */
.tpl-sub { margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--border); }
.srow.tpl-off > div { opacity: .55; }
.tpl-sched-b { margin-left: 6px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); white-space: nowrap; }
.nc.tpl-sched { border-style: solid; color: var(--warn); background: var(--warn-bg); }
.tpv-parties .tpv-co { display: block; font-size: 10px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .tpl-g2 { grid-template-columns: minmax(0, 1fr); } }
/* E2E TPL2: a brutto oszlopokkal szelesebb minta-tetelatabla az elonezet-kartyaban gorgetheto (nem log ki). */
.tpv-page { overflow-x: auto; }

/* ══ MOB-DATA (2026-10-08): SABLONOK telefonon (≤767 px), Péter Supply OS mobil-grafikája szerint ═══════════════════
 * Sablon-csipek és beállítás-fülek oldalra görgethetők; a blokkok sorrendje hüvelykujjal (40 px-es fel / le gomb) és a
 * kapcsoló (50x40) érinthető; e-mail szövegek 16 px-es mezőkkel, helyőrző-csipek görgethető sorban; az előnézet módjai
 * (Asztali / Mobil / PDF) 40 px-es gombok, a minta szövege legalább 11 px. Módosítás után a Mentés lebegő gomb az alsó
 * sáv FÖLÖTT. Asztalon (≥768 px) nincs változás. */
@media (max-width: 767px) {
  .md-tpl .page-h .act { flex-wrap: wrap; }
  .md-tpl .page-h .act .btn { flex: 1 1 auto; }
  .md-tpl .page-h [data-a="save"]:not(:disabled) { position: fixed; right: 16px; bottom: calc(var(--mob-also, 0px) + 16px); z-index: 96; flex: 0 0 auto; min-height: 48px; padding: 0 22px; border-radius: 24px; box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--primary) 70%, transparent), var(--shadow); }
  .md-tpl:has(.page-h [data-a="save"]:not(:disabled)) { padding-bottom: 72px; }
  .tpl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tpl-chips::-webkit-scrollbar { display: none; }
  .tpl-chips > * { flex: 0 0 auto; }
  .tpl-chips .tpl-use { margin-left: 4px; flex-basis: auto; white-space: nowrap; font-size: 12.5px; }
  .tpl-sched-b { font-size: 11px; }
  /* Tartalmi blokkok */
  .tb-row { gap: 4px; min-height: 58px; padding: 6px 4px 6px 12px; }
  .tb-grip { display: none; }
  .tb-name span { font-size: 14px; }
  .tb-name small { font-size: 12px; }
  .tb-mv { gap: 0; }
  .tb-mv .ic-btn { width: 40px; height: 40px; }
  .tb-hint { font-size: 12px; }
  .tb-foot { display: none; }
  /* Nyelvek */
  .md-tpl .lang { gap: 6px; }
  .md-tpl .lang span { font-size: 12px; padding: 3px 8px; }
  .tl-hint { font-size: 12.5px; }
  /* Beállítás-fülek: egy sorban, oldalra görgethetők */
  .tpl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 0; }
  .tpl-tabs::-webkit-scrollbar { display: none; }
  .tpl-tabs button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; font-size: 13.5px; }
  .md-tpl .card-h { flex-wrap: wrap; gap: 8px; }
  .md-tpl .card-h .r { margin-left: 0; }
  .md-tpl .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .md-tpl .seg > button { flex: 0 0 auto; }
  /* E-mail szövegek, tartalom */
  .tph { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .tph::-webkit-scrollbar { display: none; }
  .tph .chip { flex: 0 0 auto; font-size: 12.5px; }
  .tmprev b { font-size: 13.5px; }
  .tmprev pre { font-size: 13px; }
  .tdec label { font-size: 12px; }
  .tphide { gap: 0 10px; font-size: 13px; }
  .trev .row, .tyt { flex-wrap: wrap; }
  .tlogo { width: 112px; height: 64px; }
  .tlogo .ic-btn { top: -6px; right: -6px; width: 40px; height: 40px; }
  .tfile { min-height: 40px; }
  .md-tpl input[type="range"] { height: 40px; }
  .md-tpl .pp-acc { gap: 6px; }
  .md-tpl .pp-acc button { width: 40px; height: 40px; padding: 5px; }
  .md-tpl details > summary { min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .md-tpl details > summary .muted { font-size: 12px !important; }
  /* Élő előnézet: a minta szövege legalább 11 px */
  .md-tpl #tprev :is(small, .muted, .tpv-h5, .tpv-empty, .tpv-foot, .tpv-sub td, .tpv-co, figcaption, .tpv-cap) { font-size: 11px !important; }
  .md-tpl #tprev .cmini :is(th, td), .md-tpl #tprev .cmini .cgrp td { font-size: 11px; }
  /* Beállítás-panelek: csoportcímek és kapcsoló-sorok magyarázata */
  .md-tpl .grp-s h3 { font-size: 12px; }
  .md-tpl :is(.newb, .lockt) { font-size: 11px; }
  .md-tpl :is(.srow, .blk) small { font-size: 12px; }
  .md-tpl .tpv-a4 .tpv-page { font-size: 11px; }
}
/* ══ MOB-DATA vége ══ */
/* BRAND-PAGE (2026-10-15): a Marka-oldal kicsinyitett elonezete; PDF-modban az uj oldal jelzese elotte. */
.tpv-break { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tpv-break::before, .tpv-break::after { content: ''; flex: 1 1 auto; border-top: 1px dashed var(--border-strong); }
.tpv-brand { display: flex; flex-direction: column; gap: 8px; }
.tpv-btop { display: flex; gap: 10px; align-items: flex-start; }
.tpv-btop p, .tpv-bcontact p { margin: 0; }
.tpv-bh { margin: 2px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); }
.tpv-bh::after { content: ''; display: block; width: 26px; height: 2px; margin-top: 3px; background: var(--primary); }
.tpv-bqa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.tpv-bqa.one { grid-template-columns: minmax(0, 1fr); }
.tpv-bqa p { margin: 0 0 4px; }
.tpv-bmedia { position: relative; display: block; background: #000; }
.tpv-bmedia img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tpv-bmedia .i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; fill: #E8390E; }
.tpv-blogos { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; }
.tpv-blogos img { max-height: 30px; max-width: 54px; object-fit: contain; }
.tpv-bcontact { display: flex; flex-direction: column; gap: 4px; font-size: 10px; }