/* DAGÓ 2.0 — pages-g.css · az új konzol-arculat oldal-szintű szabályai (2026-10-12, tulaj makettjei, Part 2)
   Színliterál itt sem lehet — minden szín a tokens.css-ből. */
@layer pages {

/* ══ VIDEÓK (#page-videok · makett 44 PC alapvideók, 45 Projektor alapvideók, 46 Feltöltött) ══════════════
   FIGYELEM: a .only-desk/.only-mob elemekre itt SOSEM kerül `display` — ez a réteg erősebb, és felülírná a
   telefonos váltást (ezért van a fal-kártyák rácsa egy belső elemen). */
#page-videok .g-body { display: flex; flex-direction: column; gap: var(--gap); }
#page-videok a.btn { text-decoration: none; }
/* Asztalon a cím és a Frissítés gomb egy sorban marad — a hosszú leírás a címoszlopban tördel. */
@media (min-width: 1080px) {
  #page-videok .pagehead { flex-wrap: nowrap; }
  #page-videok .pagehead > div:first-child { flex: 1 1 auto; min-width: 0; }
  #page-videok .pagehead-act { flex: none; }
}
/* Feltöltés-jel: a felfelé nyíl (ic-up) egy tálca-vonal fölött — külön ikon nélkül. */
#page-videok .g-upi { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
#page-videok .g-upi::after { content: ""; width: .62em; height: .1em; margin-top: -.12em; border-radius: 1px; background: currentColor; }

/* Fülsor: keretes, a kiválasztott tömör borostyán (makett) */
#page-videok .g-tabs { background: none; padding: 0; gap: 6px; }
#page-videok .g-tabs .tab {
  min-height: 46px; min-width: 200px; padding: 0 22px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text);
}
#page-videok .g-tabs .tab[aria-selected="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-accent); }

#page-videok .g-sub { font-family: var(--font-body); font-size: 15px; color: var(--text); }
#page-videok .g-mut { color: var(--muted); }
#page-videok .g-row2 { font-size: 13px; color: var(--muted); margin-top: 2px; }
#page-videok .g-jobnote { margin-top: 10px; }
#page-videok .g-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Pöttyös állapot („● Aktív") */
#page-videok .g-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
#page-videok .g-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
#page-videok .g-dot--ok { color: var(--ok-ink); }
#page-videok .g-dot--ok::before { background: var(--ok); }

/* Üres előnézet-doboz (nincs fájl / nincs kép) */
#page-videok .g-novid {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 240px; margin-top: 12px; border-radius: var(--r);
  background: var(--video-bg); color: var(--muted); font-size: 13px;
}
#page-videok .g-novid .i { font-size: 26px; }
#page-videok .g-novid--wide { height: 150px; margin-top: 0; }
#page-videok .g-novid--row { height: 64px; width: 114px; margin: 0; }

/* ── PC: „Új videó feltöltése" ─────────────────────────────────────────────────────────────── */
#page-videok .g-upgrid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 6px; }
#page-videok .g-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 210px; padding: 22px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-3); border-radius: var(--r);
  background: var(--bg-2); transition: border-color var(--t-fast), background var(--t-fast);
}
#page-videok .g-drop:hover, #page-videok .g-drop.is-over, #page-videok .g-drop:focus-within { border-color: var(--amber); }
#page-videok .g-drop.is-over { background: color-mix(in srgb, var(--amber) 8%, var(--bg-2)); }
#page-videok .g-drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--amber) 70%, var(--line-2)); }
#page-videok .g-drop-ic { font-size: 40px; color: var(--text); margin-bottom: 6px; }
#page-videok .g-drop b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
#page-videok .g-drop > span:not(.g-drop-ic) { color: var(--muted); font-size: 14.5px; }
#page-videok .g-drop small { margin-top: 18px; color: var(--muted); font-size: 13.5px; }
#page-videok .g-upside { min-width: 0; }
#page-videok .g-lab { font-weight: 600; font-size: 15px; margin-bottom: 10px; }

/* „Háttér típusa" csempék */
#page-videok .g-kinds { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page-videok .g-kind {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2);
  color: var(--text); cursor: pointer;
}
#page-videok .g-kind b { font-size: 15px; font-weight: 600; }
#page-videok .g-kind > span:last-child:not(.g-kind-ic) { font-size: 13px; color: var(--muted); line-height: 1.35; }
#page-videok .g-kind[aria-pressed="true"] { border: 2px solid var(--amber); padding: 15px 9px; background: color-mix(in srgb, var(--amber) 7%, var(--bg-2)); }
#page-videok .g-kind-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; font-size: 26px; }
#page-videok .g-kind-ic--green { background: var(--green); }
#page-videok .g-kind-ic--alpha {
  background: repeating-conic-gradient(var(--text) 0 25%, var(--bg-2) 0 50%) 0 0 / 11px 11px;
}
#page-videok .g-kind-ic--opaque { color: var(--text); }
#page-videok .g-kinds--sm { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px; }
#page-videok .g-kinds--sm .g-kind { flex-direction: row; padding: 8px 14px; gap: 10px; }
#page-videok .g-kinds--sm .g-kind[aria-pressed="true"] { padding: 7px 13px; }
#page-videok .g-kinds--sm .g-kind-ic { width: 20px; height: 20px; font-size: 15px; }
#page-videok .g-kinds--sm .g-kind-ic--alpha { background-size: 7px 7px; }
#page-videok .g-kinds--sm .g-kind b { font-size: 14px; }

#page-videok .g-picked {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0;
  font-size: 14px; color: var(--text);
}
#page-videok .g-picked .i { color: var(--ok-ink); }
#page-videok .g-picked b { overflow-wrap: anywhere; }
#page-videok .g-picked span { color: var(--muted); }
#page-videok .g-picked.is-empty { color: var(--muted); flex-wrap: nowrap; align-items: flex-start; }
#page-videok .g-picked-t { flex: 1 1 auto; min-width: 0; }
#page-videok .g-picked.is-empty .i { color: var(--amber-ink); }
#page-videok .g-warn { margin-top: 16px; }

/* ── PC: „Aktuális PC alapvideók" kártyarács ──────────────────────────────────────────────── */
#page-videok .g-slots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); margin-top: 6px; }
#page-videok .g-slot { display: flex; flex-direction: column; padding: 14px; background: var(--bg-2); }
#page-videok .g-slot .card-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 0; }
#page-videok .g-slot .card-head h3 { font-size: 19px; }
#page-videok .g-slot .card-head .sub { font-size: 12px; }
#page-videok .g-slot .card-act { gap: 6px; flex-wrap: wrap; }
#page-videok .g-slot .pv { --pv-h: 270px; width: 100%; }
#page-videok .g-slot .pv-btn, #page-videok .g-slot .pv-media { width: 100%; }
#page-videok .g-slot .pv--wide { --pv-h: 130px; }
#page-videok .g-slot .kv { grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 14px; font-size: 14.5px; }
#page-videok .g-slot .kv dd { text-align: right; }
#page-videok .g-slot-act { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 14px; }
#page-videok .g-slot-act .btn { width: 100%; justify-content: center; gap: 8px; }
#page-videok .g-slot-act .btn--primary { min-height: 42px; font-size: 16px; font-weight: 600; }

/* ── Projektor: szakasz-fejléc, fal-tábla, 16:9 kártyák ───────────────────────────────────── */
#page-videok .g-secthead { align-items: flex-start; gap: 18px; }
@media (min-width: 1080px) { #page-videok .g-secthead { flex-wrap: nowrap; } #page-videok .g-secthead > div:first-child { flex: 1 1 auto; min-width: 0; } }
#page-videok .g-desc { margin: 6px 0 0; color: var(--text); font-size: 15.5px; max-width: 74ch; }
#page-videok .g-secthead-act { display: flex; align-items: center; gap: 14px; flex: none; }
#page-videok .g-secthead-act small { color: var(--muted); font-size: 13px; line-height: 1.45; }
#page-videok .g-pickbtn { position: relative; min-height: 46px; padding: 0 20px; gap: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
#page-videok .g-pickbtn:focus-within { outline: 2px solid var(--amber-ink); outline-offset: 2px; }
#page-videok .g-pickrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2);
}
#page-videok .g-pickrow .g-picked { margin: 0; }

#page-videok .g-walltable td { vertical-align: middle; }
#page-videok .g-walltable td:first-child, #page-videok .g-walltable th:first-child { width: 140px; }
#page-videok .g-pvcell .pv { --pv-h: 64px; margin-top: 0; border-radius: var(--r-sm); }
#page-videok .g-pvcell .pv-play { width: 22px; height: 22px; right: 4px; bottom: 4px; font-size: 9px; }
#page-videok .g-acts { display: flex; gap: 8px; flex-wrap: wrap; }
#page-videok .g-acts .btn, #page-videok .g-land-act .btn { gap: 8px; white-space: nowrap; }
#page-videok .g-wallcards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

#page-videok .g-lands { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
#page-videok .g-land { display: flex; flex-direction: column; padding: 0 0 14px; overflow: hidden; background: var(--bg-2); }
#page-videok .g-land > .pv { --pv-h: 150px; margin: 0 auto; border-radius: 0; }
#page-videok .g-land > .g-novid { border-radius: 0; }
#page-videok .g-land-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px 0; }
#page-videok .g-land-h h4 { margin: 0; font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.15; }
#page-videok .g-land-b { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#page-videok .g-meta { padding: 4px 14px 0; color: var(--muted); font-size: 13px; }
#page-videok .g-land .kv { grid-template-columns: 1fr auto; gap: 6px 10px; margin: 12px 14px 0; font-size: 14px; }
#page-videok .g-land .kv dd { text-align: right; }
#page-videok .g-land .g-jobnote { margin: 10px 14px 0; }
#page-videok .g-land-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 14px 14px 0; }
#page-videok .g-land-act .btn:not(.g-remove) { flex: 1 1 0; justify-content: center; }
#page-videok .g-remove { color: var(--danger-ink); }

/* ── Feltöltött: szűrősáv, tábla, előnézet-panel ──────────────────────────────────────────── */
#page-videok .g-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px 16px; }
#page-videok .g-search { position: relative; display: flex; align-items: center; flex: 1 1 300px; min-width: 0; }
#page-videok .g-search .i { position: absolute; left: 14px; color: var(--muted); pointer-events: none; font-size: 18px; }
#page-videok .g-search input {
  width: 100%; min-height: 50px; padding: 8px 12px 8px 44px; font: inherit; font-size: 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); color: var(--text);
}
#page-videok .g-fsel { display: flex; flex-wrap: wrap; gap: 12px; }
#page-videok .g-f { gap: 2px; position: relative; }
#page-videok .g-f > span { position: absolute; left: 12px; top: 6px; font-size: 11.5px; color: var(--muted); pointer-events: none; }
#page-videok .g-f select { min-height: 50px; min-width: 165px; padding: 18px 12px 4px; background: var(--bg-2); border-radius: var(--r-sm); font-size: 15px; }

#page-videok .g-upwrap { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1180px) { #page-videok .g-upwrap { grid-template-columns: minmax(0, 1fr) 330px; } }
#page-videok .g-listhead { align-items: center; }
#page-videok .g-listact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-videok .g-inl { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
#page-videok .g-listact select {
  min-height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 14px;
}
#page-videok .g-uptable { margin: 0 var(--card-pad); }
#page-videok .g-uptable td { vertical-align: middle; }
#page-videok .g-uptable tr[data-pick] { cursor: pointer; }
#page-videok .g-uptable tr.is-sel td { background: color-mix(in srgb, var(--amber) 9%, var(--panel)); }
#page-videok .g-uptable tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
#page-videok .g-titlecell { display: flex; align-items: center; gap: 12px; min-width: 190px; }
#page-videok .g-thumb {
  position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 40px;
  border-radius: 4px; overflow: hidden; background: var(--video-bg); color: var(--muted);
}
#page-videok .g-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#page-videok .g-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
#page-videok .g-titlecell .row-p1 { white-space: normal; }
#page-videok .g-uptable .card-link { font-size: 14px; text-align: left; white-space: nowrap; }
#page-videok .g-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px var(--card-pad) 0; color: var(--muted); font-size: 14px;
}
#page-videok .g-pager-b { display: flex; align-items: center; gap: 8px; }
#page-videok .g-pager-b .iconbtn { border: 1px solid var(--line-2); }
#page-videok .g-pager-b .iconbtn[disabled] { opacity: .4; pointer-events: none; }
#page-videok .g-pgno {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--amber); color: var(--on-accent); font-weight: 700;
}
#page-videok .g-chev { display: inline-grid; }
#page-videok .g-chev--l { transform: rotate(90deg); }
#page-videok .g-chev--r { transform: rotate(-90deg); }

#page-videok .g-uprev { position: sticky; top: 76px; }
#page-videok .g-uprev .pv { --pv-h: 186px; width: 100%; margin-top: 4px; }
#page-videok .g-uprev .pv-btn, #page-videok .g-uprev .pv-media { width: 100%; }
#page-videok .g-prev-t { margin: 14px 0 0; font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
#page-videok .g-prev-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#page-videok .g-prev-act .btn { gap: 8px; }
#page-videok .g-prev-tab {
  margin-top: 16px; padding: 8px 2px; width: fit-content;
  color: var(--amber-ink); font-weight: 600; border-bottom: 3px solid var(--amber);
}
#page-videok .g-prev-kv { grid-template-columns: 128px 1fr; gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
#page-videok .g-file-n { overflow-wrap: anywhere; }

/* ── Telefon ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  #page-videok .g-tabs .tab { min-width: 0; flex: 1 0 auto; font-size: 16px; padding: 0 14px; }
  #page-videok .g-upgrid { grid-template-columns: minmax(0, 1fr); }
  #page-videok .g-drop { min-height: 170px; }
  #page-videok .g-kind { padding: 12px 6px; }
  #page-videok .g-kind > span:last-child:not(.g-kind-ic) { display: none; }
  #page-videok .g-kinds--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #page-videok .g-kinds--sm .g-kind { flex-direction: column; padding: 8px 4px; gap: 4px; }
  #page-videok .g-kinds--sm .g-kind b { font-size: 12.5px; }
  #page-videok .g-secthead { flex-direction: column; }
  #page-videok .g-secthead-act { flex-wrap: wrap; }
  #page-videok .g-slots { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #page-videok .g-slot .pv { --pv-h: 230px; }
  #page-videok .g-lands { grid-template-columns: minmax(0, 1fr); }
  #page-videok .g-filters { padding: 12px; }
  #page-videok .g-fsel { width: 100%; }
  #page-videok .g-f { flex: 1 1 140px; }
  #page-videok .g-f select { min-width: 0; width: 100%; font-size: 16px; }
  #page-videok .g-search input { font-size: 16px; }
  #page-videok .g-pager { padding-inline: 16px; }
}

}

/* ── 2026-10-13: TOVÁBBI klipek egy sloton (tulaj: „több mvp, több 2,3x … amennyit felrakok annyi van belőle") ──
   A slot-kártya alján lista: kis álló előnézet · cím + csatorna-számok · levétel; alatta a „Hozzáadás új klipként"
   gomb. A Projektor fülön ugyanez fekvő előnézettel és klipenkénti 16:9 feltöltéssel / levétellel. */
#page-videok .g-extras { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
#page-videok .g-land .g-extras, #page-videok .g-extras--land { margin: 14px 14px 0; }
#page-videok .g-extras-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-size: 14.5px; }
#page-videok .g-extras-h small { font-weight: 400; color: var(--muted); }
#page-videok .g-extras-h .g-mut { font-size: 12.5px; }
#page-videok .g-xlist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#page-videok .g-x { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); background: var(--surface); }
#page-videok .g-x .pv, #page-videok .g-slot .g-x .pv { --pv-h: 96px; width: auto; margin: 0; flex: 0 0 auto; border-radius: var(--r-sm); }
#page-videok .g-slot .g-x .pv-btn, #page-videok .g-slot .g-x .pv-media { width: auto; }
#page-videok .g-x .pv-play { width: 24px; height: 24px; right: 4px; bottom: 4px; font-size: 10px; }
#page-videok .g-x--land .pv { --pv-h: 64px; }
#page-videok .g-novid--x { height: 64px; width: 114px; margin: 0; flex: 0 0 auto; border-radius: var(--r-sm); }
#page-videok .g-x-b { flex: 1 1 auto; min-width: 0; font-size: 14px; }
#page-videok .g-x-b b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
#page-videok .g-x-b .g-jobnote { margin-top: 6px; }
#page-videok .g-x-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#page-videok .g-x-del { flex: 0 0 auto; }
#page-videok .g-x-job { margin-bottom: 8px; }
#page-videok .g-extras > .btn { width: 100%; justify-content: center; gap: 8px; }
/* A fekvő kártya keskeny: az extra sorában a gombok a második sorba kerülnek, hogy a szövegnek legyen helye. */
#page-videok .g-x--land { flex-wrap: wrap; }
#page-videok .g-x--land .g-x-act { flex-basis: 100%; justify-content: flex-end; }