/* WP21 · Kampányok › Vászon: kapcsolatok (SVG-vonalak, pöttyök), oldalsáv, szellem-javaslat gombok, Üzenetirányok, Beállítások, Ajánlat hiányai, cél-haladás, idősáv-szalag. */

/* ── Vászon és kapcsolatok ── */
.vz-wrap { display: grid; gap: 14px; align-items: start; min-width: 0; }
.vz-wrap.has-side { grid-template-columns: minmax(0, 1fr) 300px; }
.vz-board { position: relative; }
.vz-links { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.vz-ln { fill: none; stroke: var(--muted); stroke-width: 2; opacity: .75; }
.vz-ln.ghost { stroke-dasharray: 5 4; stroke: var(--ai, #7c3aed); }
.vz-ln.on { stroke: var(--primary, #6b46c1); stroke-width: 3; opacity: 1; }
.vz-ln.dim { opacity: .18; }
.vz-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.vz-hit:hover + .vz-ln, .vz-hit:focus { outline: none; }
.vz-tmp { fill: none; stroke: var(--primary, #6b46c1); stroke-width: 3; stroke-dasharray: 6 4; pointer-events: none; }
.mos-card.vz-c { position: relative; z-index: 1; cursor: pointer; }
.mos-card.vz-c b[role="button"] { cursor: pointer; }
.mos-card.vz-c.sel { border-color: var(--primary, #6b46c1); box-shadow: 0 0 0 2px var(--primary-subtle, rgba(107, 70, 193, .18)); }
.mos-card.vz-c.dim { opacity: .45; }
.mos-card.vz-c.drop { outline: 2px dashed var(--primary, #6b46c1); outline-offset: 2px; }
.mos-card.vz-c.drop.hot { background: var(--primary-subtle, rgba(107, 70, 193, .12)); }
.vz-board.connecting { cursor: crosshair; user-select: none; }
.vz-port { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); touch-action: none; }
.vz-port.in { left: -8px; }
.vz-port.out { right: -8px; }
.vz-board.can .vz-port.out { cursor: crosshair; border-color: var(--primary, #6b46c1); }
.vz-board.can .vz-port.out:hover { background: var(--primary, #6b46c1); }
.mos-card.vz-c .vz-rel { font-size: 12px; }
.vz-ca { display: flex; flex-wrap: wrap; gap: 6px; }
.mos-card.vz-c .vz-conn { font-size: 12px; color: var(--primary, #6b46c1); cursor: pointer; text-decoration: underline; width: fit-content; }
.vz-dirs { font-size: 13px; color: var(--primary, #6b46c1); cursor: pointer; width: fit-content; }
.vz-dirs:hover { text-decoration: underline; }
@media (min-width: 1101px) { .mos-card.vz-c .vz-rel { display: none; } }
@media (max-width: 1100px) {
  .vz-links, .vz-port { display: none; }
  .vz-wrap.has-side { grid-template-columns: 1fr; }
}
@media (pointer: coarse) { .vz-links, .vz-port { display: none; } .mos-card.vz-c .vz-rel { display: block; } }

/* ── Oldalsáv ── */
.vz-side .vz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vz-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); }
.vz-chip i { font-style: normal; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.vz-chip:hover { border-color: var(--primary, #6b46c1); }

/* ── Cél-haladás ── */
.vz-prog { display: grid; gap: 4px; font-size: 14px; }
.vz-pbar { display: block; width: 100%; max-width: 360px; height: 8px; margin-top: 3px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.vz-pbar i { display: block; height: 100%; background: var(--primary, #6b46c1); }

/* ── Ablakok: beállítások, ajánlat, irányok ── */
.vz-fs { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.vz-fs legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.vz-ck { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.vz-og { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); }
.vz-og input { width: 100%; }
.vz-dirs-l { display: grid; gap: 8px; }
.vz-dir { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.vz-dact { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-dirnew { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.vz-err { padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 14px; }
.vz-ok { color: var(--ok); font-size: 13px; }

/* ── Idősáv-szalag ── */
.vz-rib { display: grid; gap: 4px; }
.vz-rib-r { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.vz-rib-l { color: var(--muted); }
.vz-rib-t { position: relative; height: 22px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.vz-band { position: absolute; top: 5px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--primary, #6b46c1) 30%, transparent); }
.vz-dot { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--muted); opacity: .5; }
.vz-dot.mine { background: var(--primary, #6b46c1); opacity: 1; }
.vz-dot.ghost { background: transparent; border: 2px dashed var(--ai, #7c3aed); opacity: 1; }
.vz-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad, #b42318); }
@media (max-width: 767px) { .vz-rib-r { grid-template-columns: 70px minmax(0, 1fr); } }