/* ============================================================================= far360 — A TABLAZATOK TELEFONOS ALAKJA. MIERT ONALLO FAJL: a tables.css 118 sor, ez a blokk ~85 — egyutt atlepnenk a hazirendi 200 soros CSS-komponens-korlatot. A felelosseg is elkulonul: a tables.css a tabla arculata, ez a fajl a 700 px alatti viselkedese. HAROM SZINT, SZANDEKOSAN: 1. MINDEN .f-table (700 px alatt) — ragado ELSO oszlop + surubb, olvashatobb tipografia + egyoszlopos szurosav. Nincs opt-in: minden admin-lista kapja, a jovobeliek is. EGY UJ MODUL SEM IR SAJAT MOBIL-TABLASZABALYT. 2. .f-table--ragado-muvelet (opt-in) — a ragado UTOLSO oszlop. Csak ott, ahol az utolso oszlop MUVELET-oszlop. A /admin/naplo, a jelenlet-osszesito es a portal 3 oszlopos tablajanak utolso oszlopa ADAT — azt ragasztani veszteseg. 3. .f-table--kartya (opt-in, 560 px alatt) — a sor KARTYAVA alakul, a fejlec cimkeje a td data-f-cimke attributumabol jon. Csak a megrendelo dontese szerint telefon-optimalizalt feluleteken (lasd DESIGN.md). MERT INDOK (2026-09-26, 375x812, elo peldany; .f-table-wrap belso szelesseg 291-341 px): /admin/jelentkezesek 11 oszlop / 1388 px · /admin/jelenlet 8 / 841 · jelenlet turnus 8 / 895 es 10 / 1146 · jelenlet alkalom 5 / 807 · jelentkezes-adatlap 8 / 1038 · vezerlopult 7 / 806 · portal szerzodeseim 5 / 529. iOS SAFARI: a position:sticky a border-collapse:collapse melletti cellakon NEM tart. Ezert a media-blokk separate + border-spacing:0-ra all, es a cellahatarokat a td/th sajat alsó szegelye adja (a tables.css collapse-os szabalyaival azonos latvany). Ezt NE allitsd vissza collapse-ra. ============================================================================= */ @media (max-width: 700px) { .f-table-wrap { -webkit-overflow-scrolling: touch; } /* A separate mellett a szomszedos cellak szegelye nem olvad ossze, tehat a fejlec alatti es a sorok kozotti vonal pontosan egy 1 px-es vonal marad. */ .f-table { border-collapse: separate; border-spacing: 0; font-size: 0.9rem; } .f-table thead th { /* 11,52 px -> 12,8 px: ez az adminban a legkisebb funkcionalis szoveg volt. */ font-size: 0.8rem; padding: 0.7rem 0.75rem; } .f-table tbody td { padding: 0.7rem 0.75rem; overflow-wrap: anywhere; } /* 1. RAGADO ELSO OSZLOP — a sorazonosito (szerzodesszam / datum / resztvevo neve) akkor is latszik, amikor a hasznalo a 11. oszlopot nezi. A z-index a fejlecen nagyobb, mert az a ket ragado tengely keresztezese. */ .f-table thead th:first-child, .f-table tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--f-white); box-shadow: 1px 0 0 var(--f-border); } .f-table thead th:first-child { background: var(--f-light); z-index: 2; } /* K-6: a tables.css tr:hover szabalya a ragado cellara nem hatna at (sajat, atlatszatlan hattere van) — csikos, hibasnak latszo sor keletkezne. */ .f-table tbody tr:hover td:first-child { background: var(--f-light); } /* 2. RAGADO MUVELET-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-white); box-shadow: -1px 0 0 var(--f-border); } .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. SZUROSAV egy oszlopban, teljes szelessegu vezerlokkel. Merve: /admin/jelentkezesek szurosav 366 px, NYOLC sor, 99-343 px kozotti vegyes szelessegekkel. */ .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; } } /* ----------------------------------------------------------------------------- KARTYA-NEZET — opt-in (.f-table--kartya), 560 px alatt. A cimke a td data-f-cimke attributumabol jon (ekezet nelkuli attributumnev, a projekt data-f-* szokasa szerint). A thead NEM display:none, hanem kepernyorol elrejtett: a felolvaso igy tovabbra is megtalalja az oszlopneveket. ----------------------------------------------------------------------------- */ @media (max-width: 560px) { /* A tabla-modell teljes feladasa: igy a sorok blokkokka valnak, es a tabla nem probal tovabb oszlopszelessegeket egyeztetni. */ .f-table--kartya, .f-table--kartya tbody { display: block; border-spacing: 0; } /* A burkolo mar nem gorget: eppen a vizszintes gorgetes-kenyszert szuntettuk meg. (:has — ugyanaz a szerkezet, mint a forms.css .f-kombo-valaszto-jaban, igy a burkolo jeloleset nem kell megvaltoztatni.) */ .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-border); border-radius: var(--f-radius-sm); background: var(--f-white); } .f-table--kartya tbody tr:hover { background: var(--f-white); } .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-border); } .f-table--kartya tbody tr td:last-child { border-bottom: none; } /* A cella grid-ELEMEINEK automatikus minimuma a tartalmuk min-content szelessege (pl. egy
, amiben file-valaszto all: 303 px). 320 px-es kepernyon ez OLDALSZINTU vizszintes gorgetest adott — a min-width: 0 oldja fel. */ .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(--f-font-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--f-grey); } /* Cimke nelkuli cella (muveletsor, vagy amit szandekosan nem cimkezunk): teljes szelessegben all, ::before nelkul. */ .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 KEPERNYO (iPhone SE, 320-420 px): a cimke a MEZO FOLE kerul. Indok (merve 2026-09-26, 320x812): a 7,5 rem-es cimke-hasab mellett az ertek-hasab 83 px-re szukult, es egy white-space: nowrap jelveny („nincs feltoltve", 127 px) kilogott belole — 13 px oldalszintu vizszintes gorgetes a jelenlet-turnus lapon. 420 px folott a ket hasab elfer, es ugy tomorebb a kartya. */ @media (max-width: 420px) { .f-table--kartya tbody td { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } } /* A kartya-nezetben a ragado oszlopoknak nincs ertelme — a sor nem gorgul. */ .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; } }