/* Email marketing - alap stílus (önálló, egyetlen fájl). */

:root {
  --szin-elsodleges: #2557d6;
  --szin-elsodleges-sotet: #1b40a0;
  --szin-elsodleges-vilagos: #e8eefc;
  --szin-siker: #2e7d32;
  --szin-siker-vilagos: #e7f4e8;
  --szin-veszely: #c62828;
  --szin-veszely-vilagos: #fdecea;
  --szin-figyelmeztetes: #b26a00;
  --szin-figyelmeztetes-vilagos: #fff3e0;

  --szin-alap: #f5f6f8;
  --szin-felulet: #ffffff;
  --szin-szoveg: #1c1f24;
  --szin-szoveg-halvany: #6b7280;
  --szin-szegely: #dcdfe4;

  --terkoz-2: 8px;
  --terkoz-3: 12px;
  --terkoz-4: 16px;
  --terkoz-5: 24px;
  --terkoz-6: 32px;

  --sarok: 8px;
  --arnyek: 0 1px 3px rgba(0, 0, 0, 0.08);
  --oldalsav-szel: 220px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --szin-alap: #14171a;
    --szin-felulet: #1e2226;
    --szin-szoveg: #f0f1f2;
    --szin-szoveg-halvany: #9aa1a9;
    --szin-szegely: #33393f;
    --szin-elsodleges-vilagos: #1c2a4a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--szin-alap);
  color: var(--szin-szoveg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

h1 { font-size: 24px; margin: 0; }
a { color: var(--szin-elsodleges); }

/* ---- Elrendezés: oldalsáv + fő tartalom ---- */
.oldalsav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--oldalsav-szel);
  background: var(--szin-felulet);
  border-right: 1px solid var(--szin-szegely);
  padding: var(--terkoz-4) var(--terkoz-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.markanev {
  font-weight: 700;
  font-size: 18px;
  padding: var(--terkoz-2) var(--terkoz-3) var(--terkoz-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--terkoz-2);
}

/* Bal menü becsukása */
.nav-csuk {
  background: none;
  border: none;
  color: var(--szin-szoveg-halvany);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--sarok);
}
.nav-csuk:hover { background: var(--szin-alap); color: var(--szin-szoveg); }
.nav-nyit {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  width: 40px;
  height: 40px;
  border: 1px solid var(--szin-szegely);
  background: var(--szin-felulet);
  color: var(--szin-szoveg);
  border-radius: var(--sarok);
  cursor: pointer;
  font-size: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--arnyek);
}
body.nav-csukva .oldalsav { display: none; }
body.nav-csukva .fotartalom { margin-left: 0; padding-left: 60px; }
body.nav-csukva .nav-nyit { display: inline-flex; }

.oldalsav .menu-fo {
  display: block;
  padding: 10px var(--terkoz-3);
  border-radius: var(--sarok);
  color: var(--szin-szoveg);
  text-decoration: none;
  font-weight: 600;
}
.oldalsav .menu-fo:hover { background: var(--szin-alap); }
.oldalsav .menu-fo.aktiv { background: var(--szin-elsodleges-vilagos); color: var(--szin-elsodleges); }

.oldalsav .almenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 var(--terkoz-2) var(--terkoz-3);
  padding-left: var(--terkoz-3);
  border-left: 2px solid var(--szin-szegely);
}
.oldalsav .almenu a {
  padding: 6px var(--terkoz-3);
  border-radius: var(--sarok);
  color: var(--szin-szoveg-halvany);
  text-decoration: none;
  font-size: 14px;
}
.oldalsav .almenu a:hover { background: var(--szin-alap); color: var(--szin-szoveg); }

.fotartalom {
  margin-left: var(--oldalsav-szel);
  padding: var(--terkoz-5) var(--terkoz-6);
  max-width: none;
}

/* ---- Fejléc sor ---- */
.fejlec-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--terkoz-3);
  margin-bottom: var(--terkoz-5);
}
.fejlec-gombok { display: flex; gap: var(--terkoz-2); }

/* ---- Gombok ---- */
.gomb {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--sarok);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.gomb--elsodleges { background: var(--szin-elsodleges); color: #fff; }
.gomb--elsodleges:hover { background: var(--szin-elsodleges-sotet); }
.gomb--szoveges { background: transparent; color: var(--szin-elsodleges); border-color: var(--szin-szegely); }
.gomb--szoveges:hover { background: var(--szin-alap); }
.gomb--veszely { background: transparent; color: var(--szin-veszely); border-color: var(--szin-veszely); }
.gomb--veszely:hover { background: var(--szin-veszely-vilagos); }

/* ---- Táblázat ---- */
.tabla-gorgo { overflow-x: auto; }

/* Néma görgő: görgethető marad, de a natív vízszintes csúszkát elrejtjük
   (a Kampányok boardon egyetlen közös csúszka van a képernyő alján) */
.tabla-gorgo--nema { scrollbar-width: none; -ms-overflow-style: none; }
.tabla-gorgo--nema::-webkit-scrollbar { height: 0; width: 0; display: none; }

/* Egyetlen, a képernyő aljára rögzített vízszintes csúszka.
   A bal szél (oldalsáv szélessége) a JS-ben pontosítva, itt csak alapérték. */
.board-csuszka {
  position: fixed; bottom: 0; right: 0; left: var(--oldalsav-szel); z-index: 40;
  height: 16px; overflow-x: auto; overflow-y: hidden;
  background: var(--szin-felulet); border-top: 1px solid var(--szin-szegely);
}
.board-csuszka[hidden] { display: none; }
.board-csuszka-belso { height: 1px; }

/* Húzható oszlopszélesség (fix elrendezésű táblák) */
.atmeretezheto th { position: relative; }
.atmeretezheto th, .atmeretezheto td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oszlop-fogo { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 3; }
.oszlop-fogo:hover { background: var(--szin-elsodleges); opacity: 0.5; }
body.oszlop-huzas { cursor: col-resize; user-select: none; }
.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--szin-felulet);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok);
  overflow: hidden;
}
.tabla th, .tabla td {
  text-align: left;
  padding: 11px var(--terkoz-4);
  border-bottom: 1px solid var(--szin-szegely);
  vertical-align: middle;
}
.tabla th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--szin-szoveg-halvany);
  background: var(--szin-alap);
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla .jobbra { text-align: right; }
.halvany { color: var(--szin-szoveg-halvany); }

/* ---- Címke (állapot) ---- */
.cimke {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--szin-alap);
  color: var(--szin-szoveg-halvany);
}
.cimke--piszkozat { background: var(--szin-alap); color: var(--szin-szoveg-halvany); }
.cimke--utemezett { background: var(--szin-figyelmeztetes-vilagos); color: var(--szin-figyelmeztetes); }
.cimke--futo { background: var(--szin-elsodleges-vilagos); color: var(--szin-elsodleges); }
.cimke--befejezett { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.cimke--leallitva { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }
.cimke--aktiv { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.cimke--leiratkozott { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }
.cimke--visszapattant { background: var(--szin-figyelmeztetes-vilagos); color: var(--szin-figyelmeztetes); }

/* ---- Kártya / űrlap ---- */
.kartya {
  background: var(--szin-felulet);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok);
  box-shadow: var(--arnyek);
  padding: var(--terkoz-5);
}
.urlap { max-width: 720px; }
.urlap--szeles { max-width: none; }
.mezo { margin-bottom: var(--terkoz-4); }
.mezo-sugo { display: block; font-size: 12px; color: var(--szin-szoveg-halvany); margin-top: 4px; }

/* Szekciók (fieldset) a hosszú űrlapon - színezett blokkok, hogy elváljanak */
.szekcio {
  background: var(--szin-alap);
  border: 1px solid var(--szin-szegely);
  border-left: 4px solid var(--szin-elsodleges);
  border-radius: var(--sarok);
  padding: var(--terkoz-4) var(--terkoz-4) var(--terkoz-4) var(--terkoz-5);
  margin: 0 0 var(--terkoz-4);
}
.szekcio > legend {
  padding: 3px 12px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--szin-elsodleges);
  border-radius: 5px;
  margin-left: -2px;
}
.szekcio .mezo { margin-bottom: 0; }

/* Körbeforgó színpaletta a szekciókhoz (bal szegély + címke-chip) */
.szekcio:nth-of-type(6n+1) { border-left-color: #4b7bec; }
.szekcio:nth-of-type(6n+1) > legend { background: #4b7bec; }
.szekcio:nth-of-type(6n+2) { border-left-color: #26a65b; }
.szekcio:nth-of-type(6n+2) > legend { background: #26a65b; }
.szekcio:nth-of-type(6n+3) { border-left-color: #8e44ad; }
.szekcio:nth-of-type(6n+3) > legend { background: #8e44ad; }
.szekcio:nth-of-type(6n+4) { border-left-color: #e67e22; }
.szekcio:nth-of-type(6n+4) > legend { background: #e67e22; }
.szekcio:nth-of-type(6n+5) { border-left-color: #16a085; }
.szekcio:nth-of-type(6n+5) > legend { background: #16a085; }
.szekcio:nth-of-type(6n+6) { border-left-color: #c0397b; }
.szekcio:nth-of-type(6n+6) > legend { background: #c0397b; }

/* Küldés késleltetés - elkülönített, érték szerint színezett mező */
.keslektetes-mezo {
  max-width: 340px;
  margin-top: var(--terkoz-4);
  padding-top: var(--terkoz-3);
  border-top: 1px dashed var(--szin-szegely);
}
.keslektetes-input.keslektetes-piros { background: #fde0e0; border-color: #e2445c; color: #7a1f1f; }
.keslektetes-input.keslektetes-zold { background: #d6f5e3; border-color: #00c875; color: #0b5a30; }

/* Két oszlopos mezőrács */
.mezo-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--terkoz-4);
  margin-bottom: var(--terkoz-4);
}
.mezo-racs:last-child { margin-bottom: 0; }
.jelolo--onallo { margin: 0 0 var(--terkoz-4); }
.mezo input[readonly], .mezo input:disabled { background: var(--szin-alap); color: var(--szin-szoveg-halvany); }
.mezo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.kotelezo { color: var(--szin-veszely); }

.mezo input:not([type="checkbox"]):not([type="radio"]),
.mezo select,
.mezo textarea {
  width: 100%;
  padding: 9px var(--terkoz-3);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok);
  background: var(--szin-felulet);
  color: var(--szin-szoveg);
  font-size: 15px;
  font-family: inherit;
  height: auto;
  box-sizing: border-box;
}
.mezo textarea { resize: vertical; }
.mezo input:focus, .mezo select:focus, .mezo textarea:focus {
  outline: none;
  border-color: var(--szin-elsodleges);
  box-shadow: 0 0 0 3px var(--szin-elsodleges-vilagos);
}

.jelolo-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--terkoz-2);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok);
  padding: var(--terkoz-3);
}
.jelolo-racs--magas { max-height: 280px; overflow-y: auto; }
.jelolo {
  display: flex;
  align-items: center;
  gap: var(--terkoz-2);
  font-weight: 400;
  font-size: 14px;
}
.jelolo input { width: auto; }

.urlap-lablec { margin-top: var(--terkoz-5); }
.torlo-urlap { margin-top: var(--terkoz-4); }

/* ---- Üres állapot ---- */
.ures-allapot {
  background: var(--szin-felulet);
  border: 1px dashed var(--szin-szegely);
  border-radius: var(--sarok);
  padding: var(--terkoz-6);
  text-align: center;
  color: var(--szin-szoveg-halvany);
}
.ures-allapot p { margin-bottom: var(--terkoz-4); }

/* ---- Flash üzenetek ---- */
.flash-lista { margin-bottom: var(--terkoz-5); display: flex; flex-direction: column; gap: var(--terkoz-2); }
.flash-uzenet {
  padding: var(--terkoz-3) var(--terkoz-4);
  border-radius: var(--sarok);
  font-size: 14px;
  font-weight: 500;
}
.flash-uzenet--siker { background: var(--szin-siker-vilagos); color: var(--szin-siker); }
.flash-uzenet--hiba { background: var(--szin-veszely-vilagos); color: var(--szin-veszely); }

/* ---- Szerkeszthető táblázat (címlista grid) ---- */
.grid-sugo { color: var(--szin-szoveg-halvany); font-size: 13px; margin-bottom: var(--terkoz-3); }
.cimlista-grid td { white-space: nowrap; }
.szerk-cella { cursor: pointer; position: relative; }
.szerk-cella:hover { background: var(--szin-elsodleges-vilagos); box-shadow: inset 0 0 0 1px var(--szin-elsodleges); }
.szerk-cella.szerkesztes-alatt { padding: 2px; background: var(--szin-felulet); }
.cella-szerkeszto {
  width: 100%;
  min-width: 120px;
  box-sizing: border-box;
  font-size: 14px;
  font-family: inherit;
  padding: 5px 6px;
  border: 1px solid var(--szin-elsodleges);
  border-radius: 4px;
  background: var(--szin-felulet);
  color: var(--szin-szoveg);
}
.ro-cella { color: var(--szin-szoveg); }

/* ---- Fa nézet (Kampányok -> célcsoportok) ---- */
.fa-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--szin-szoveg-halvany);
  width: 20px;
  padding: 0;
  margin-right: 4px;
}
.fa-toggle:hover { color: var(--szin-elsodleges); }
.celcsoport-sor > td { background: var(--szin-alap); padding-top: 6px; padding-bottom: 6px; }
.fa-gyerek { padding-left: var(--terkoz-6); font-size: 14px; }
.fa-ag { color: var(--szin-szoveg-halvany); margin-right: 6px; }
.cs-nev-cella { padding-left: var(--terkoz-5); }
.celcsoport-sor--add .fa-gyerek a { font-size: 13px; }

/* ---- Modal (kártya panel) ---- */
body.modal-nyitva { overflow: hidden; }
.modal-hatter {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--terkoz-5);
  overflow-y: auto;
  z-index: 100;
}
.modal-hatter[hidden] { display: none; }
.modal-panel {
  position: relative;
  background: var(--szin-felulet);
  border-radius: var(--sarok);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  max-width: 980px;
  width: 100%;
  margin: auto;
}
.modal-bezar {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--szin-szoveg-halvany);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sarok);
  z-index: 2;
}
.modal-bezar:hover { background: var(--szin-alap); color: var(--szin-szoveg); }
.modal-tartalom { padding: var(--terkoz-5); }
/* A modálban a beágyazott űrlap ne kapjon dupla kártya-keretet, és a "vissza" link rejtve. */
.modal-tartalom .urlap.kartya { box-shadow: none; border: none; padding: 0; }
.modal-tartalom .fejlec-sor .vissza-link { display: none; }

/* ---- Kijelölés + tömeges szerkesztés ---- */
.kijelolo-oszlop { width: 34px; text-align: center; }
.kijelolo-oszlop input { cursor: pointer; }
.cimlista-grid tr:has(.sor-kijelolo:checked) > td { background: var(--szin-elsodleges-vilagos); }
.bulk-sav[hidden] { display: none; }
.bulk-sav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--szin-elsodleges-vilagos);
  border: 1px solid var(--szin-elsodleges);
  color: var(--szin-szoveg);
  border-radius: var(--sarok);
  padding: var(--terkoz-3) var(--terkoz-4);
  margin-bottom: var(--terkoz-3);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--terkoz-3);
  flex-wrap: wrap;
}
.bulk-sav .gomb { margin-left: auto; }

/* ---- Bejelentkezés / auth oldal ---- */
body.auth-oldal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--terkoz-5);
}
.auth-doboz { width: 100%; max-width: 420px; }
.auth-kartya { padding: var(--terkoz-6); }
.auth-kartya h2 { margin-bottom: var(--terkoz-2); }
.gomb--tomb { display: block; width: 100%; text-align: center; }

/* ---- Oldalsáv lábléc (bejelentkezett felhasználó + kilépés) ---- */
.oldalsav-lablec {
  margin-top: auto;
  padding-top: var(--terkoz-4);
  border-top: 1px solid var(--szin-szegely);
}
.oldalsav-nev {
  font-size: 13px;
  color: var(--szin-szoveg-halvany);
  padding: 0 var(--terkoz-3) var(--terkoz-2);
}

/* ---- Mentett nézetek (nézetválasztó + oszlop-szerkesztő) ---- */
.nezet-sav {
  display: flex;
  align-items: center;
  gap: var(--terkoz-2);
  flex-wrap: wrap;
  margin-bottom: var(--terkoz-4);
}
.nezet-sav > label { font-weight: 600; font-size: 14px; }
.nezet-sav select {
  padding: 8px var(--terkoz-3);
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok);
  background: var(--szin-felulet);
  color: var(--szin-szoveg);
  font-size: 14px;
}
.beagyazott-urlap { display: inline; }
.modal-panel--kicsi { max-width: 560px; }

.oszlop-rendezo {
  list-style: none;
  margin: var(--terkoz-3) 0;
  padding: 0;
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok);
}
.oszlop-tetel {
  display: flex;
  align-items: center;
  gap: var(--terkoz-2);
  padding: 7px var(--terkoz-3);
  border-bottom: 1px solid var(--szin-szegely);
  background: var(--szin-felulet);
}
.oszlop-tetel:last-child { border-bottom: none; }
.oszlop-tetel.huzas { opacity: 0.4; }
.oszlop-tetel label {
  display: flex;
  align-items: center;
  gap: var(--terkoz-2);
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  margin: 0;
}
.oszlop-tetel .oszlop-pipa { width: auto; }
.fogantyu { color: var(--szin-szoveg-halvany); cursor: grab; user-select: none; font-size: 16px; }

/* ============================================================
   Monday-szerű megjelenés (státusz-pill, avatar, idővonal, csoportok)
   ============================================================ */
:root {
  --md-piszkozat: #c4c7cc;
  --md-utemezett: #fdab3d;
  --md-futo: #00c875;
  --md-befejezett: #579bfc;
  --md-leallitva: #e2445c;
  --md-aktiv: #00c875;
  --md-leiratkozott: #e2445c;
  --md-visszapattant: #fdab3d;
}

/* Státusz pill (kitölti a cellát, Monday-stílus) */
.md-pill {
  display: inline-block;
  min-width: 104px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.md-pill--piszkozat, .md-pill--aktiv, .md-pill--utemezett, .md-pill--futo,
.md-pill--befejezett, .md-pill--leallitva, .md-pill--leiratkozott, .md-pill--visszapattant { }
.md-pill--piszkozat { background: var(--md-piszkozat); color: #3a3f47; }
.md-pill--utemezett { background: var(--md-utemezett); }
.md-pill--futo { background: var(--md-futo); }
.md-pill--befejezett { background: var(--md-befejezett); }
.md-pill--leallitva { background: var(--md-leallitva); }
.md-pill--aktiv { background: var(--md-aktiv); }
.md-pill--leiratkozott { background: var(--md-leiratkozott); }
.md-pill--visszapattant { background: var(--md-visszapattant); }

/* Dinamikus státusz-pill színpaletta (státusz értékekhez) */
.md-pill--szurke { background: #c4c7cc; color: #3a3f47; }
.md-pill--zold { background: #00c875; }
.md-pill--kek { background: #579bfc; }
.md-pill--lila { background: #a25ddc; }
.md-pill--narancs { background: #fdab3d; }
.md-pill--piros { background: #e2445c; }
.md-pill--turkiz { background: #00a9a9; }
.md-pill--indigo { background: #5559df; }
.md-pill--rozsa { background: #ff5ac4; }
.md-pill--borostyan { background: #c9a227; }
.md-pill--oliv { background: #7f9c3d; }

/* Üres cella típus-súgó (ABC szöveghez, 123 számhoz) */
.cella-hint { color: var(--szin-szegely); font-style: italic; }
@media (prefers-color-scheme: dark) { .cella-hint { color: #444a52; } }

/* Szám mezők: ne legyen léptető nyíl (nézzenek ki mint a szöveg) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Címlista grid: oszlop-elválasztók + pill-cellák */
.cimlista-grid th, .cimlista-grid td { border-right: 1px solid var(--szin-szegely); }
.cimlista-grid th:last-child, .cimlista-grid td:last-child { border-right: none; }
.cimlista-grid td.pill-cella { text-align: center; padding: 5px 6px; }
.pill-cella .md-pill { min-width: 0; width: 100%; box-sizing: border-box; }

/* Címlista grid: kézi csoportok (Monday groups) */
.cimlista-grid .grp-fej > td { background: var(--szin-alap); padding: 8px 12px; }
.grp-toggle { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--szin-szoveg-halvany); padding: 0; margin-right: 2px; }
.grp-szin { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.grp-fej strong { font-size: 15px; }
.grp-add-link { margin-left: 10px; font-size: 13px; }

/* Színválasztó (csoport színe) */
.szin-valaszto { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.szin-pont { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: inline-block; position: relative; }
.szin-pont input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.szin-pont:has(input:checked) { outline: 2px solid var(--szin-szoveg); outline-offset: 2px; }

/* Státusz színek admin oldal */
.statusz-szin-oldal { display: flex; flex-wrap: wrap; gap: var(--terkoz-4); align-items: flex-start; }
.statusz-szin-blokk { flex: 1 1 440px; min-width: 320px; }
.statusz-szin-lista { display: flex; flex-direction: column; gap: 8px; }
.statusz-szin-sor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.statusz-szin-pill { min-width: 150px; text-align: center; }
.statusz-szin-jelzo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--szin-szoveg-halvany); border: 1px solid var(--szin-szegely);
  border-radius: 10px; padding: 1px 7px; line-height: 1.6;
}
.statusz-szin-jelzo.auto { opacity: .55; }
.szin-valaszto--pipek { margin-left: auto; gap: 6px; }
.szin-pip {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  cursor: pointer; padding: 0; transition: transform .08s ease;
}
.szin-pip:hover { transform: scale(1.14); }
.szin-pip.aktiv { outline: 2px solid var(--szin-szoveg); outline-offset: 2px; }
.szin-pip[disabled] { opacity: .5; cursor: default; }

/* Adatok előkészítése (címlista-tisztítás) */
.elokeszites-valaszto { padding: var(--terkoz-3) var(--terkoz-4); margin-bottom: var(--terkoz-4); max-width: 480px; }
.elokeszites-osszegzes { display: flex; gap: var(--terkoz-4); padding: var(--terkoz-4); margin-bottom: var(--terkoz-4); flex-wrap: wrap; }
.osszegzo-doboz {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px;
  padding: var(--terkoz-3) var(--terkoz-4); border-radius: var(--sarok);
  background: var(--szin-alap); border-left: 4px solid var(--szin-elsodleges);
}
.osszegzo-doboz--figyelem { border-left-color: #e2445c; }
.osszegzo-doboz--rendben { border-left-color: #00c875; }
.osszegzo-szam { font-size: 26px; font-weight: 700; line-height: 1.1; }
.osszegzo-cimke { color: var(--szin-szoveg-halvany); font-size: 13px; }
.elokeszites-blokkok { display: flex; flex-wrap: wrap; gap: var(--terkoz-4); align-items: flex-start; }
.elokeszites-blokk { flex: 1 1 460px; min-width: 320px; }
.elokeszites-blokk--rendben { opacity: .62; }
.blokk-fej { display: flex; gap: var(--terkoz-3); align-items: baseline; }
.blokk-szam { font-size: 22px; font-weight: 700; min-width: 56px; }
.blokk-szam--gond { color: #e2445c; }
.blokk-leiras { color: var(--szin-szoveg-halvany); font-size: 13px; }
.blokk-muveletek { display: flex; gap: var(--terkoz-3); align-items: center; flex-wrap: wrap; margin-top: var(--terkoz-3); }
.blokk-muveletek .beagyazott-urlap { display: flex; gap: var(--terkoz-2); align-items: center; flex-wrap: wrap; }
.elokeszites-minta { margin-top: var(--terkoz-4); padding: var(--terkoz-4); }
.elokeszites-minta h2 { font-size: 18px; margin: 0; }
.elokeszites-minta .tabla-gorgo { max-height: 460px; overflow-y: auto; }

/* Weboldal-tartalom letöltés */
.weboldal-blokk { margin-top: var(--terkoz-4); padding: var(--terkoz-4); }
.weboldal-blokk h2 { font-size: 18px; margin: 0; }
.web-statok { display: flex; gap: var(--terkoz-3); flex-wrap: wrap; margin: var(--terkoz-3) 0; }
.web-stat {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px;
  padding: var(--terkoz-2) var(--terkoz-3); border-radius: var(--sarok);
  background: var(--szin-alap); border-left: 4px solid var(--szin-elsodleges);
}
.web-stat--ok { border-left-color: #00c875; }
.web-stat--hiba { border-left-color: #e2445c; }
.web-stat--hatra { border-left-color: #fdab3d; }
.web-stat-szam { font-size: 22px; font-weight: 700; line-height: 1.1; }
.web-stat-cimke { color: var(--szin-szoveg-halvany); font-size: 12px; }
.web-alcim { font-size: 15px; margin: var(--terkoz-4) 0 var(--terkoz-2); }
.web-auto-sav {
  display: flex; align-items: center; gap: var(--terkoz-3); flex-wrap: wrap;
  padding: var(--terkoz-3) var(--terkoz-4); margin-bottom: var(--terkoz-3);
  border-radius: var(--sarok); border-left: 4px solid var(--szin-elsodleges);
  background: var(--szin-elsodleges-vilagos);
}
.web-auto-sav > span:not(.web-auto-pont) { flex: 1 1 320px; }
.web-auto-pont {
  width: 10px; height: 10px; border-radius: 50%; background: var(--szin-elsodleges);
  animation: web-auto-lukt 1s ease-in-out infinite;
}
@keyframes web-auto-lukt { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.web-tabla-gorgo { max-height: 420px; overflow-y: auto; }
.web-url { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-tartalom-fej { padding: var(--terkoz-4); margin-bottom: var(--terkoz-4); }
.web-forras { display: flex; gap: var(--terkoz-3); align-items: center; flex-wrap: wrap; word-break: break-all; margin-bottom: var(--terkoz-2); }
.web-tartalom-szoveg { padding: var(--terkoz-4); }
.web-tartalom-szoveg h2 { font-size: 18px; margin: 0; }
.web-oldalcim { margin: var(--terkoz-2) 0 4px; }
.web-muveletek {
  display: flex; gap: var(--terkoz-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--terkoz-3); padding-top: var(--terkoz-3);
  border-top: 1px solid var(--szin-szegely);
}
.web-muveletek .mezo-sugo { flex: 1 1 260px; margin: 0; }

/* Menüpont-lista + tartalom kétoszlopos elrendezés */
.web-ketoszlop { display: flex; gap: var(--terkoz-4); align-items: flex-start; flex-wrap: wrap; }
.web-menu-lista { flex: 0 1 280px; min-width: 240px; padding: var(--terkoz-4); position: sticky; top: var(--terkoz-3); }
.web-menu-lista h2 { font-size: 16px; margin: 0 0 4px; }
.web-ketoszlop .web-tartalom-szoveg { flex: 1 1 520px; min-width: 320px; }
.web-menu { list-style: none; margin: var(--terkoz-2) 0 0; padding: 0; max-height: 620px; overflow-y: auto; }
.web-menu-elem a {
  display: flex; justify-content: space-between; gap: var(--terkoz-2); align-items: baseline;
  padding: 7px 10px; border-radius: 6px; text-decoration: none;
  color: var(--szin-szoveg); border-left: 3px solid transparent;
}
.web-menu-elem a:hover { background: var(--szin-alap); }
.web-menu-elem.aktiv a { background: var(--szin-elsodleges-vilagos); border-left-color: var(--szin-elsodleges); font-weight: 600; }
.web-menu-elem.hibas a { opacity: .6; }
.web-menu-cimke { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-menu-meta { color: var(--szin-szoveg-halvany); font-size: 12px; white-space: nowrap; }
.web-menu-hiba { color: #e2445c; }
.web-menu-elem--szurt { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--szin-szegely); }
.web-menu-elem--szurt a { font-weight: 600; }

/* Szűrt adatok blokkok */
.szurt-blokkok { display: flex; flex-direction: column; gap: var(--terkoz-4); margin-top: var(--terkoz-3); }
.szurt-blokk {
  border: 1px solid var(--szin-szegely); border-left: 4px solid var(--szin-elsodleges);
  border-radius: var(--sarok); padding: var(--terkoz-3) var(--terkoz-4);
}
.szurt-blokk--ures { border-left-color: var(--szin-szegely); opacity: .7; }
.szurt-blokk h3 { font-size: 15px; margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.szurt-db {
  font-size: 12px; font-weight: 600; color: var(--szin-szoveg-halvany);
  background: var(--szin-alap); border-radius: 10px; padding: 1px 8px;
}
.szurt-leiras { color: var(--szin-szoveg-halvany); font-size: 12px; margin: 0 0 var(--terkoz-2); }
.szurt-nincs { color: var(--szin-szoveg-halvany); font-style: italic; margin: 0; }
.szurt-lista { margin: 0; padding-left: 20px; }
.szurt-lista li { margin-bottom: 3px; word-break: break-word; }
.szurt-szoveg { margin: 0 0 8px; line-height: 1.5; }
.web-szoveg {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  max-height: 640px; overflow-y: auto;
  background: var(--szin-alap); border: 1px solid var(--szin-szegely);
  border-radius: var(--sarok); padding: var(--terkoz-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55;
}

/* AI beállítások */
.ai-blokk { padding: var(--terkoz-4); margin-bottom: var(--terkoz-4); }
.ai-blokk h2 { font-size: 18px; margin: 0 0 var(--terkoz-2); }
.ai-allapot { font-weight: 600; margin: 0 0 var(--terkoz-2); }
.ai-allapot--ok { color: #0b7a4b; }
.ai-allapot--hiba { color: #b3283c; }
.ai-allapot code { background: var(--szin-alap); padding: 1px 5px; border-radius: 4px; }
.ai-modellek { display: flex; flex-direction: column; gap: var(--terkoz-2); }
.ai-modell {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--terkoz-3);
  align-items: start; cursor: pointer;
  border: 1px solid var(--szin-szegely); border-left: 4px solid var(--szin-szegely);
  border-radius: var(--sarok); padding: var(--terkoz-3) var(--terkoz-4);
}
.ai-modell:hover { background: var(--szin-alap); }
.ai-modell.aktiv { border-left-color: var(--szin-elsodleges); background: var(--szin-elsodleges-vilagos); }
.ai-modell input { grid-row: 1 / span 3; margin-top: 4px; }
.ai-modell-cimke { font-weight: 600; }
.ai-modell-leiras { color: var(--szin-szoveg-halvany); font-size: 13px; }
.ai-modell-id { font-size: 12px; color: var(--szin-szoveg-halvany); }

/* Célcsoport importálási blokk */
.import-blokk { margin-top: var(--terkoz-4); padding: var(--terkoz-4) var(--terkoz-5); }
.import-blokk h2 { font-size: 18px; margin: 0; }
.import-urlap { display: flex; gap: var(--terkoz-3); align-items: center; flex-wrap: wrap; margin-top: var(--terkoz-2); }
.import-eredmeny { margin-top: var(--terkoz-4); border-top: 1px solid var(--szin-szegely); padding-top: var(--terkoz-3); }
.import-eredmeny .tabla-gorgo { max-height: 320px; overflow-y: auto; margin-top: var(--terkoz-2); }
.import-hiba { color: var(--szin-veszely, #b3283c); font-weight: 600; }

/* Csoportkezelő modal sorai */
.csoport-kezelo-sor { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--szin-szegely); flex-wrap: wrap; }
.csoport-szerk-form { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.csoport-szerk-form input[type="text"], .csoport-uj-form input[type="text"] {
  flex: 1; min-width: 150px; padding: 7px 10px;
  border: 1px solid var(--szin-szegely); border-radius: var(--sarok);
  background: var(--szin-felulet); color: var(--szin-szoveg);
}
.csoport-muveletek { display: flex; gap: 4px; }
.csoport-uj-form { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* Avatar-kör (felelősök) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Idővonal-sáv (dátum tartomány + haladás) */
.idosav {
  position: relative;
  height: 26px;
  border-radius: 6px;
  background: #e8f7ef;
  overflow: hidden;
  min-width: 160px;
}
.idosav-kitolt { position: absolute; top: 0; bottom: 0; left: 0; background: #00c875; opacity: .5; }
.idosav-szoveg {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  line-height: 26px;
  font-size: 12px;
  font-weight: 600;
  color: #0b6b3a;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .idosav { background: #163524; }
  .idosav-szoveg { color: #7fe0ac; }
}

/* Count badge (item melletti szám) */
.szamla-badge {
  display: inline-block;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--szin-alap);
  color: var(--szin-szoveg-halvany);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  margin-left: 4px;
}

/* Monday-táblák: oszlop-elválasztók, központozott fejléc, tfoot összeg */
.md-tabla th, .md-tabla td { border-right: 1px solid var(--szin-szegely); }
.md-tabla th:last-child, .md-tabla td:last-child { border-right: none; }
.md-tabla th { text-align: center; text-transform: none; letter-spacing: 0; font-size: 13px; }
.md-tabla td.kozep, .md-tabla th.kozep { text-align: center; }
.md-tabla td.jobbra { text-align: right; }
.md-tabla tfoot td { font-weight: 700; color: var(--szin-szoveg-halvany); background: var(--szin-alap); }
.md-tabla .statusz-cella { padding: 6px; }

/* Csoportok (Monday group blokk) */
.md-csoport {
  margin-bottom: var(--terkoz-5);
  border-left: 4px solid var(--szin-szegely);
  border-radius: var(--sarok);
  overflow: hidden;
  background: var(--szin-felulet);
}
.md-csoport--piszkozat { border-left-color: var(--md-piszkozat); }
.md-csoport--utemezett { border-left-color: var(--md-utemezett); }
.md-csoport--futo { border-left-color: var(--md-futo); }
.md-csoport--befejezett { border-left-color: var(--md-befejezett); }
.md-csoport--leallitva { border-left-color: var(--md-leallitva); }
.md-csoport-fej {
  display: flex;
  align-items: center;
  gap: var(--terkoz-2);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--terkoz-3);
  font-size: 16px;
  font-weight: 700;
}
.md-csoport--piszkozat .md-csoport-fej { color: #6b7280; }
.md-csoport--utemezett .md-csoport-fej { color: #b26a00; }
.md-csoport--futo .md-csoport-fej { color: #0b8a4f; }
.md-csoport--befejezett .md-csoport-fej { color: #2f6fd6; }
.md-csoport--leallitva .md-csoport-fej { color: #b3283c; }
.md-csoport-fej .szamla-halvany { color: var(--szin-szoveg-halvany); font-weight: 500; font-size: 14px; }
.md-csoport-fej .nyil { font-size: 12px; width: 16px; }
.md-csoport-test { border-top: 1px solid var(--szin-szegely); }
.md-csoport .tabla { border: none; border-radius: 0; }
.md-csoport .md-tabla thead th { background: var(--szin-alap); }

/* ---- Reszponzív ---- */
@media (max-width: 720px) {
  .oldalsav {
    position: static;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--szin-szegely);
  }
  .markanev { padding: var(--terkoz-2) var(--terkoz-3); width: 100%; }
  .oldalsav .almenu { border-left: none; margin: 0; padding-left: 0; flex-direction: row; }
  .fotartalom { margin-left: 0; padding: var(--terkoz-4); }
}