/* ===== cap-tabel: kozos tablazat-stilus (capsuni) =====
   Szerkezet:
   <div class="cap-tabel-wrap">
     <h3>Cim</h3>
     <div class="cap-tabel-scroll"><table class="cap-tabel">
       <thead><tr><th>..</th></tr></thead>
       <tbody> = egy fazis (a zebra csoportonkent valtakozik)
       <tfoot> = piros megjegyzes
     </table></div>
     <span class="cap-tabel-hint" aria-hidden="true">Gliseaza <svg/></span>
   </div>
   Oszlop-classok: .cap-faza / .cap-produs / .cap-doza
*/
.cap-tabel-wrap {
  --cap-zold: #8cbc67;
  --cap-zold-sotet: #73935e;
  --cap-piros: #d7262e;
  --cap-vilagos: #f5f5f5;
  --cap-sotetebb: #e7e7e7;
  --cap-vonal: #d9d9d9;
  --cap-szoveg: #333;
  position: relative;
  margin: 0 0 2em;
}
.cap-tabel-wrap h3 {
  margin: 0;
  padding: .7em 1em;
  background: var(--cap-zold);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
}
.cap-tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cap-vonal);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.cap-tabel {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--cap-szoveg);
}
.cap-tabel th {
  background: var(--cap-zold-sotet);
  color: #fff;
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .6em 1em;
  white-space: nowrap;
  border: 0;
}
.cap-tabel td {
  padding: .55em 1em;
  vertical-align: middle;
  border: 0;
}
.cap-tabel tbody:nth-of-type(odd)  td { background: var(--cap-vilagos); }
.cap-tabel tbody:nth-of-type(even) td { background: var(--cap-sotetebb); }
.cap-tabel tbody + tbody tr:first-child td { border-top: 1px solid var(--cap-vonal); }
.cap-tabel .cap-faza { width: 50%; }
.cap-tabel .cap-faza small { display: block; color: #666; font-size: .85em; }
.cap-tabel .cap-produs { font-weight: 700; white-space: nowrap; }
.cap-tabel .cap-produs a { color: var(--cap-zold-sotet); text-decoration: none; border-bottom: 1px dotted currentColor; }
.cap-tabel .cap-produs a:hover { color: var(--cap-zold); border-bottom-style: solid; }
.cap-tabel .cap-doza { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cap-tabel tfoot td {
  background: var(--cap-piros);
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: .8em 1em;
}
.cap-tabel tfoot tr + tr td { border-top: 1px solid rgba(255,255,255,.25); }

/* 4 oszlopos valtozat: Obiectiv oszloppal */
.cap-tabel.cap-tabel--obiectiv { min-width: 780px; }
.cap-tabel.cap-tabel--obiectiv .cap-faza { width: 27%; }
.cap-tabel.cap-tabel--obiectiv .cap-obiectiv { width: 33%; color: #4d5a4f; font-size: .9em; }
.cap-tabel .cap-doza.cap-doza--szoveg { white-space: normal; }
/* szakasz-sor (pl. „Plantare” / „Pornire in vegetatie”) */
.cap-tabel tbody.cap-szakasz td {
  background: #dfeee4 !important;
  color: var(--cap-zold-sotet);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .45em 1em;
}
/* „sol” cimke: talajon at adagolt termek */
.cap-tabel .cap-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #8a5a2b;
  color: #fff;
  font-size: .7em;
  font-weight: 600;
  vertical-align: 1px;
  text-transform: lowercase;
}
/* egyszeru racs (pl. N / P / K / M-Grow) */
.cap-tabel.cap-tabel--racs { min-width: 0; }
.cap-tabel.cap-tabel--racs th,
.cap-tabel.cap-tabel--racs td { text-align: center; white-space: normal; }
.cap-tabel.cap-tabel--racs td:first-child { font-weight: 600; text-align: left; }
.cap-tabel.cap-tabel--racs th:first-child { text-align: left; }
/* vegyjelek (Cu, Fe, Mn, P₂O₅) miatt a rács-fejléc nem nagybetűs */
.cap-tabel.cap-tabel--racs th { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.cap-tabel.cap-tabel--racs.cap-tabel--kozepes { min-width: 640px; }
.cap-tabel.cap-tabel--racs.cap-tabel--szeles { min-width: 820px; }
.cap-tabel.cap-tabel--racs.cap-tabel--szeles td,
.cap-tabel.cap-tabel--racs.cap-tabel--szeles th { padding-left: .5em; padding-right: .5em; }
/* cim nelkuli tablazat: a fejlec kapja a lekerekitest */
.cap-tabel-wrap > .cap-tabel-scroll:first-child { border-top: 1px solid var(--cap-vonal); border-radius: 8px; }
/* megjegyzes a tablazat alatt */
.cap-tabel-megj { margin: .6em 0 0; font-size: .85rem; color: #6b776d; font-style: italic; }
@media (max-width: 767px) {
  .cap-tabel-wrap h3 { font-size: 1rem; }
  .cap-tabel { min-width: 560px; font-size: .9rem; }
  .cap-tabel .cap-faza { width: auto; min-width: 230px; }
  .cap-tabel.cap-tabel--obiectiv { min-width: 720px; }
  .cap-tabel.cap-tabel--obiectiv .cap-faza { min-width: 170px; }
  .cap-tabel.cap-tabel--racs { min-width: 0; }
  /* rovid cella nem tor (a tablazat ugyis gorgetheto), hosszu cella min. 13em — a jeloles: cap-tabel.js (2026-10-07) */
  .cap-tabel-scroll :is(td, th).cap-rovid { white-space: nowrap; }
  .cap-tabel-scroll :is(td, th).cap-hosszu { min-width: 13em; }
}

/* gorgetes-jelzo: csak ha nem fer ki; eltunik, ha a vegere ert */
.cap-tabel-hint {
  position: absolute;
  right: 10px;
  top: .55em;
  display: none;
  align-items: center;
  gap: .35em;
  padding: .4em .75em .4em .9em;
  background: #fff;
  color: var(--cap-zold-sotet);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  pointer-events: none;
  transition: opacity .3s;
}
.cap-tabel-hint svg { width: 16px; height: 16px; animation: cap-nyil 1.2s ease-in-out infinite; }
@keyframes cap-nyil { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.cap-tabel-wrap.is-tulcsordul .cap-tabel-hint { display: inline-flex; }
.cap-tabel-wrap.is-tulcsordul h3 { padding-right: 7.5em; }
.cap-tabel-wrap.is-tulcsordul::after {
  content: "";
  position: absolute;
  top: 0; right: 1px; bottom: 1px;
  width: 40px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
  border-radius: 0 0 8px 0;
  pointer-events: none;
  transition: opacity .3s;
}
.cap-tabel-wrap.is-vegen .cap-tabel-hint,
.cap-tabel-wrap.is-vegen::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cap-tabel-hint svg { animation: none; } }