/* =============================================================================
   Iktató — A TÁBLÁZATOK TELEFONOS ALAKJA. Átvéve a far360 tables-mobil.css-éből.

   MIÉRT ÖNÁLLÓ FÁJL: a tables.css a tábla arculata, ez a fájl a 700 px alatti
   viselkedése (és együtt átlépnék a 200 soros korlátot).

   HÁROM SZINT, SZÁNDÉKOSAN:
   1. MINDEN .f-table (700 px alatt): ragadó ELSŐ oszlop (az iktatószám) + sűrűbb,
      olvashatóbb tipográfia. Nincs opt-in: minden lista kapja. ÚJ LISTA SEM ÍR
      SAJÁT MOBIL-TÁBLASZABÁLYT.
   2. .f-table--ragado-muvelet (opt-in): ragadó UTOLSÓ oszlop, ahol az MŰVELET-oszlop.
   3. .f-table--kartya (opt-in, 560 px alatt): a sor KÁRTYÁVÁ alakul, a fejléc címkéje a
      td data-f-cimke attribútumából jön. CSAK az ügyintézői munkalistán és az
      ügyfélportálon (DESIGN.md „Felületek”).

   iOS SAFARI: a position:sticky a border-collapse:collapse melletti cellákon NEM tart.
   Ezért a media-blokk separate + border-spacing:0-ra áll. Ezt NE állítsd vissza collapse-ra.
   ============================================================================= */

@media (max-width: 700px) {
  .f-table-wrap { -webkit-overflow-scrolling: touch; }

  .f-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
  }
  .f-table thead th {
    /* 11,52 px -> 12,8 px: ez volt a legkisebb funkcionális szöveg. */
    font-size: 0.8rem;
    padding: 0.7rem 0.75rem;
  }
  .f-table tbody td {
    padding: 0.7rem 0.75rem;
    /* break-word, NEM anywhere: az anywhere a cella min-content szélességét egy betűre csökkenti, a tábla
       ilyenkor a képernyőre zsugorodik (betűnként törő cellák) ahelyett, hogy vízszintesen görgethető maradna. */
    overflow-wrap: break-word;
  }

  /* 1. RAGADÓ ELSŐ OSZLOP: a sorazonosító akkor is látszik, amikor a használó a 11.
        oszlopot nézi. A fejlécen nagyobb a z-index: az a két ragadó tengely keresztezése. */
  .f-table thead th:first-child,
  .f-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--f-card);
    box-shadow: 1px 0 0 var(--f-line);
  }
  .f-table thead th:first-child {
    background: var(--f-light);
    z-index: 2;
  }
  /* Az első oszlopnak értelmes MINIMÁLIS szélesség kell, és szóhatáron törjön (a ragadó oszlop, pl. egy könyv
     neve, ne törjön betűnként). A tábla ezen túl vízszintesen görgethető marad (.f-table-wrap). Szűk első
     oszlopot (pl. sorszám) a .f-table--szuk-elso kér. */
  .f-table thead th:first-child,
  .f-table tbody td:first-child { min-width: 9rem; }
  .f-table tbody td:first-child {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
  /* Az azonosító (iktatószám: MOH/2026/00001-1) egyben marad: a kötőjelnél sem törhet. */
  .f-table tbody td.f-azonosito:first-child { white-space: nowrap; }
  .f-table.f-table--szuk-elso thead th:first-child,
  .f-table.f-table--szuk-elso tbody td:first-child { min-width: 0; }

  /* A tables.css tr:hover szabálya a ragadó cellára nem hatna át (saját, átlátszatlan
     háttere van): csíkos, hibásnak látszó sor keletkezne. */
  .f-table tbody tr:hover td:first-child { background: var(--f-light); }

  /* 2. RAGADÓ MŰVELET-OSZLOP: opt-in. */
  .f-table--ragado-muvelet thead th:last-child,
  .f-table--ragado-muvelet tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--f-card);
    box-shadow: -1px 0 0 var(--f-line);
  }
  .f-table--ragado-muvelet thead th:last-child {
    background: var(--f-light);
    z-index: 2;
  }
  .f-table--ragado-muvelet tbody tr:hover td:last-child { background: var(--f-light); }

  /* 3. SZŰRŐSÁV egy oszlopban, teljes szélességű vezérlőkkel. */
  .f-table-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .f-table-filters select,
  .f-table-filters input,
  .f-table-filters button,
  .f-table-filters .btn-f,
  .f-table-filters .btn-f-outline {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* -----------------------------------------------------------------------------
   KÁRTYA-NÉZET: opt-in (.f-table--kartya), 560 px alatt. A címke a td data-f-cimke
   attribútumából jön. A thead NEM display:none, hanem képernyőről elrejtett: a
   felolvasó így továbbra is megtalálja az oszlopneveket.
   ----------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* A táblamodell teljes feladása: a sorok blokkokká válnak. */
  .f-table--kartya,
  .f-table--kartya tbody {
    display: block;
    border-spacing: 0;
  }
  /* A burkoló már nem görget: éppen a vízszintes görgetés-kényszert szüntettük meg. */
  .f-table-wrap:has(> .f-table--kartya) { overflow-x: visible; }
  .f-table--kartya thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .f-table--kartya tbody tr {
    display: block;
    margin: 0.6rem;
    border: 1px solid var(--f-line);
    border-radius: var(--r-field);
    background: var(--f-card);
  }
  .f-table--kartya tbody tr:hover { background: var(--f-card); }
  .f-table--kartya tbody td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--f-line);
  }
  .f-table--kartya tbody tr td:last-child { border-bottom: none; }
  /* A cella grid-ELEMEINEK automatikus minimuma a tartalmuk min-content szélessége
     (pl. egy fájlválasztós űrlap: 303 px): 320 px-en oldalszintű görgetés. */
  .f-table--kartya tbody td > * { min-width: 0; max-width: 100%; }
  .f-table--kartya tbody td::before {
    content: attr(data-f-cimke);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--f-grey);
  }
  /* Címke nélküli cella (műveletsor): teljes szélességben áll, ::before nélkül. */
  .f-table--kartya tbody td:not([data-f-cimke]) { grid-template-columns: minmax(0, 1fr); }
  .f-table--kartya tbody td:not([data-f-cimke])::before { content: none; }

  /* NAGYON KESKENY KÉPERNYŐ (320-420 px): a címke a MEZŐ FÖLÉ kerül, különben az
     érték-hasáb 83 px-re szűkül, és egy nowrap jelvény kilóg belőle. */
  @media (max-width: 420px) {
    .f-table--kartya tbody td { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  }

  /* A kártya-nézetben a ragadó oszlopoknak nincs értelme: a sor nem görgül. */
  .f-table--kartya thead th:first-child,
  .f-table--kartya tbody td:first-child,
  .f-table--kartya thead th:last-child,
  .f-table--kartya tbody td:last-child {
    position: static;
    box-shadow: none;
    background: none;
    min-width: 0;
  }
}