/**
 * Lista-motor — a szűrhető/lapozható listák megjelenése.
 *
 * KÖZÖS stíluslap: a js/lista-motor.js-re épülő MINDEN lista ezt használja
 * (anonimizált határozat- és ügyiratjegyzék, vagyonnyilatkozati vizsgálatok, …).
 *
 * Külön fájl, feltételesen betöltve (mint a countdown.css), NEM a style.css része:
 * a style.css SCSS-ből fordul, és élesen jellemzően nincs gulp. Így a listák saját
 * stílusa build nélkül is módosítható.
 *
 * A meglévő bejelentés-tábla (`#result-container`, a 4389-es oldalon) stílusát követi,
 * de saját osztályokkal, mert az ott 4 oszlopra huzalozott grid a több oszlopos
 * táblákhoz nem használható. Az oszlopszélességet a motor adja inline
 * (gridTemplate a configból), így a CSS oszlopszám-független marad.
 *
 * ⚠️ OSZTÁLY-ALAPÚ, nem ID-alapú (2026-08-14). Eredetileg #filter-container /
 * #result-container / #pagination-container volt, de EGY oldalon TÖBB lista is futhat
 * (a vizsgálat-oldalon kettő: folyamatban + lezárt), és az ID nem ismételhető.
 * A konténerek ezért a `.lm-filters`, `.lm-results`, `.lm-pagination` osztályokat
 * kapják — az ID megmarad, de csak a JS-config horgonyának.
 *
 * ÖRÖKLÉS-ELV: amit a téma már ad, azt itt NEM írjuk újra.
 *   - `<button>` (törlés-gomb, lapozó): a `body button` (style.css:225) adja a
 *     8px radiust, a félkövért, az inline-blockot és a nowrapot; a `body main
 *     button` (2051) a fehér hátteret és a primary szövegszínt. Itt csak a keret,
 *     a padding és a kurzor marad. ⚠️ A paddinget KÖTELEZŐ megadni: a téma
 *     `padding-right: 60px`-et ad a nyilas gombokhoz, az ide nem illik.
 *   - Mezők: a `body input#search-input` (89) értékeit átvettük (1em padding,
 *     10px radius, 1px solid #E2DDDF). ID-szelektor, ezért nem hivatkozható –
 *     ez tudatos másolat. Ha a téma keresője változik, ezt kézzel kell követni.
 *
 * Radius a témából: nagy dobozok 20px · gomb 8px · mező 10px.
 */

/* ------------------------------------------------------------------ szűrők */

/* A doboznak nincs háttere – csak a mezők szürkék (a vagyonnyilatkozati terv szerint).
   A négy szűrő két sorban, kettesével; a „Szűrők törlése" a jobb szélen, a két sor
   mellett. Az elrendezés itt, az oldal saját stíluslapjában van kimondva – a motor
   szűrő-független marad. */
/* Alsó margó szándékosan nincs: a szűrőket tartó <section> már ad
   `padding-bottom`-ot, a kettő együtt üres sávot nyitna a tábla fölött. */
.lm-filters {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.25em 1.5em;
}

/* Ha a szűrők és a tábla EGY szekcióban vannak (shortcode-os beillesztésnél így
   van), akkor nincs szekció-padding közöttük – itt kell a térköz. Külön
   szekciókba tett konténereknél ez a szabály nem él, mert nem testvérek. */
.lm-filters + .lm-results {
  display: block;
  margin-top: 2.5em;
}

.lm-filters .lm-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lm-filters .lm-filter:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.lm-filters .lm-filter:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.lm-filters .lm-filter:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.lm-filters .lm-filter:nth-of-type(4) { grid-column: 2; grid-row: 2; }

.lm-filters .lm-filter--actions {
  grid-column: 3;
  /* 1 / -1, nem "1 / span 2": egysoros szűrő-elrendezésnél (2 szűrő) a span
     fölösleges második sort nyitott, és a gomb lecsúszott a mezők alá. */
  grid-row: 1 / -1;
  align-self: end;
  justify-content: flex-end;
}

.lm-filters .lm-label {
  font-weight: 700;
  font-size: 0.9em;
}

.lm-filters .lm-sub {
  font-size: 0.85em;
  white-space: nowrap;
}

/* A mezők a Közérdekű bejelentések oldal keresőjének stílusát követik
   (style.css `body input#search-input`): fehér alap, halvány keret, 10px radius. */
.lm-filters input[type="search"],
.lm-filters input[type="date"],
.lm-filters select {
  padding: 1em;
  border-radius: 10px;
  border: 1px solid #E2DDDF;
  background-color: #FFFFFF;
  font-size: 1em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* A natív legördülő nyila a padding-right széléhez igazodik, ezért a nagyobb
   jobb oldali padding tolja beljebb – így nem tapad a kerethez. */
.lm-filters select {
  padding-right: 2.25em;
}

.lm-filters input:focus-visible,
.lm-filters select:focus-visible,
.lm-filters .lm-clear:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary, #000000);
  outline-offset: 2px;
}

/* mező, utána a „-tól" / „-ig" címke — ezért 1fr auto 1fr auto. */
.lm-filters .lm-daterange {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
}

/* A `<button>` alapját a TÉMA adja, nem írjuk újra:
     style.css:225  body button        -> 8px radius, félkövér, inline-block, nowrap
     style.css:2051 body main button   -> fehér háttér, primary szöveg
   Itt csak az marad, ami ezen felül kell. A padding a téma `padding-right: 60px`-ét
   írja felül – az a nyilas gombokhoz való, nekünk nem kell. */
.lm-filters .lm-clear {
  border: 1px solid #E2DDDF;
  padding: 1em 1.4em;
  cursor: pointer;
  font-size: 1em;
}

.lm-filters .lm-clear:hover {
  background-color: var(--wp--preset--color--primary, #201747);
  color: #FFFFFF;
  border-color: var(--wp--preset--color--primary, #201747);
}

/* A találatszám a szűrők alatt, teljes szélességben. */
.lm-filters .lm-count {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  font-size: 0.9em;
}

/* ------------------------------------------------------------------ tábla */

/* A tábla a Közérdekű bejelentések nyilvántartásának megjelenését követi:
   keret nélküli sorok oldalt-alul #E2DDDF vonallal, 2em oszlopköz, a fejléc
   bcg-gray alapon, 20px lekerekítés a tábla két végén. */
.lm-results .lm-row {
  display: grid;
  gap: 2em;
  padding: 1em;
  border-left: 1px solid #E2DDDF;
  border-right: 1px solid #E2DDDF;
  border-bottom: 1px solid #E2DDDF;
  align-items: start;
}

.lm-results .lm-row .lm-col {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.lm-results .lm-header {
  font-weight: 700;
  background-color: var(--wp--preset--color--bcg-gray, #F1F1F5);
  border-top: 1px solid #E2DDDF;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.lm-results .lm-row:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.lm-results .lm-col.kozzetetel {
  white-space: nowrap;
}

/* A PDF-linkek gombként, a paletta `primary` színével (#201747) – a márka kékje,
   nem a WP-admin linkkékje. Fehér szöveggel 15,4:1 kontraszt, WCAG AAA. */
.lm-results .lm-col.pdf a {
  display: inline-block;
  background-color: var(--wp--preset--color--primary, #201747);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px; /* mint a téma gombjai (style.css:229) */
  padding: 0.6em 1.1em;
  white-space: nowrap;
}

/* Hover: a téma világosabb navy árnyalata (#362e59), ami már szerepel a style.css-ben. */
.lm-results .lm-col.pdf a:hover,
.lm-results .lm-col.pdf a:focus-visible {
  background-color: #362E59;
  color: #FFFFFF;
}

/* Hiányzó PDF: szándékosan halvány, de nem láthatatlan – a szerkesztőnek is jelez. */
.lm-results .lm-missing {
  color: #767676;
}

.lm-results .lm-empty {
  padding: 1.5em;
  border: 1px solid #E2DDDF;
  border-radius: 20px;
}

/* -------------------------------------------------------------- lapozás */

.lm-pagination .pagination {
  text-align: center;
  margin-top: 1.5em;
}

/* Ugyanaz az öröklés, mint a törlés-gombnál – a radius, a félkövér és a fehér
   alap a témából jön. */
.lm-pagination .page-btn {
  border: 1px solid #C4C4C4;
  padding: 0.4em 0.85em;
  margin: 0 2px;
  cursor: pointer;
}

.lm-pagination .page-btn.active {
  background-color: var(--wp--preset--color--primary, #000000);
  color: #FFFFFF;
  border-color: var(--wp--preset--color--primary, #000000);
}

/* --------------------------------------------------------------- mobil */

/* A szűrők hamarabb törnek egy oszlopba, mint a tábla – két mező egymás mellett
   900px alatt már összenyomódna. */
@media screen and (max-width: 900px) {
  .lm-filters {
    grid-template-columns: 1fr;
  }

  /* A nth-of-type-os asztali elhelyezést AZONOS specificitással kell visszavonni –
     a media query önmagában nem ad súlyt, ezért a rövidebb szelektor alulmaradna,
     és a mezők egymásra csúsznának. */
  .lm-filters .lm-filter:nth-of-type(1),
  .lm-filters .lm-filter:nth-of-type(2),
  .lm-filters .lm-filter:nth-of-type(3),
  .lm-filters .lm-filter:nth-of-type(4),
  .lm-filters .lm-filter--actions,
  .lm-filters .lm-count {
    grid-column: 1;
    grid-row: auto;
    align-self: stretch;
  }

  .lm-filters .lm-clear {
    width: 100%;
  }

  /* Két dátummező + két címke egy sorban keskenyen összenyomódna: mező és
     címkéje maradjon együtt, de a -tól és az -ig kerüljön külön sorba. */
  .lm-filters .lm-daterange {
    grid-template-columns: 1fr auto;
  }
}

@media screen and (max-width: 1269px) {
  /* A grid-template-columns-t a motor inline adja, ezért !important kell. */
  .lm-results .lm-row {
    grid-template-columns: 1fr !important;
    gap: 1em;
    padding: 16px;
  }

  .lm-results .lm-header {
    display: none;
  }

  /* A fejléc `display:none`, de a DOM-ban ott marad – ezért a lekerekítést a
     MÁSODIK sor kapja, az az első látható. (`:first-of-type` a rejtett fejlécet
     találná el, és a tábla teteje szögletes maradna.) */
  .lm-results .lm-row:nth-of-type(2) {
    border-top: 1px solid #E2DDDF;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  /* Fejléc helyett soronkénti címkék. */
  .lm-results .lm-row .lm-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .lm-results .lm-row .lm-col::before {
    content: attr(data-label) ":";
    font-weight: 700;
    color: #555555;
  }

  .lm-results .lm-col.ugyszam,
  .lm-results .lm-col.kozzetetel,
  .lm-results .lm-col.pdf {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .lm-results .lm-col.ugyszam::before,
  .lm-results .lm-col.kozzetetel::before,
  .lm-results .lm-col.pdf::before {
    white-space: nowrap;
  }
}

/* ============================================================================
   Vízszintes szűrő-sor — opcionális modifier: .lm-filters--inline
   ----------------------------------------------------------------------------
   A vagyonnyilatkozati vizsgálatok tervén a szűrők EGY sorban futnak, „Szűrés:”
   felirattal és mezőnév-címke nélkül (az információt a placeholder hordozza).
   A jegyzék négyszűrős, kétsoros elrendezése változatlan marad — ez csak akkor
   lép életbe, ha a konténer megkapja a --inline osztályt.
   ========================================================================== */

.lm-filters--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em 1em;
}

.lm-filters--inline::before {
  content: "Szűrés:";
  font-weight: 700;
  white-space: nowrap;
}

.lm-filters--inline .lm-filter {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* A címke vizuálisan rejtve, de a DOM-ban marad — a felolvasó így is tudja,
   mit szűr a legördülő (a select önmagában csak a placeholdert mondaná ki). */
.lm-filters--inline .lm-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lm-filters--inline select,
.lm-filters--inline input[type="search"],
.lm-filters--inline input[type="text"] {
  min-width: 190px;
  width: auto;
}

/* A „Szűrők törlése” a mezők MELLETT, jobbra — nem alattuk, teljes szélességben. */
.lm-filters--inline .lm-filter--actions {
  margin-left: auto;
  grid-column: auto;
  grid-row: auto;
}

.lm-filters--inline .lm-clear {
  width: auto;
  white-space: nowrap;
  padding: 8px 16px;
}

/* A találatszámláló külön sorba, a szűrők alá. */
.lm-filters--inline .lm-count {
  flex-basis: 100%;
  margin: 0;
}

/* ============================================================================
   „Részletek” gomb a link-oszlopban
   ----------------------------------------------------------------------------
   A terven ez nem sima link, hanem tömör gomb: sötétkék alap, fehér felirat,
   nyíl-ikon jobbra. A téma with-arrow gombjának mintáját követi
   (style.css:225–245), hogy egy rendszerben legyen a fejléc „Bejelentés”
   gombjával. A KÖZÖS motor link-renderelése érintetlen marad — a gomb-kinézet
   csak az oszlop className-jére (`reszletek`) van kötve.
   ========================================================================== */

.lm-results .lm-col.reszletek a {
  position: relative;
  display: inline-block;
  padding: 13px 58px 13px 22px;
  background-color: var(--wp--preset--color--primary, #201747);
  color: #ffffff;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.lm-results .lm-col.reszletek a:after {
  /* FEHÉR nyíl: a Header_Bejelentes-nyil.png sötétkék, ami ezen a sötét gombon
     láthatatlan. Az arrow-white.png (31x16) a téma saját fehér nyila. */
  content: url(/wp-content/themes/pm-core/images/arrow-white.png);
  position: absolute;
  top: 50%;
  right: 18px;
  width: 30px;
  height: 15px;
  display: block;
  transform: translateY(-50%);
}

.lm-results .lm-col.reszletek a:hover,
.lm-results .lm-col.reszletek a:focus-visible {
  opacity: 0.92;
  color: #ffffff;
}

/* A gomb-cella jobbra igazítva, ahogy a terven. */
.lm-results .lm-col.reszletek {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}