/* ============================================================================ FoglalGo · Komponensek — „Nyugodt pult" irány ---------------------------------------------------------------------------- Minden érték a tokenek.css szemantikus tokenjeiből jön; nyers szín itt nincs. Használat: Szabály: --szin-szoveg-halvany a --szin-hover-eros (homok) háttérre nem kerülhet — ott 4,5:1 alá esne. Halvány szöveg csak papíron/felületen/finom tinten állhat. ============================================================================ */ /* ============================== ALAP ==================================== */ .foglalgo-alap { margin: 0; background: var(--szin-hatter); color: var(--szin-szoveg); font-family: var(--betu-szoveg); font-size: var(--meret-alap); line-height: var(--sormagassag-alap); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .foglalgo-alap *, .foglalgo-alap *::before, .foglalgo-alap *::after { box-sizing: border-box; } .foglalgo-alap ::selection { background: var(--szin-akcio); color: var(--szin-akcio-szoveg); } /* Egységes, látható fókuszgyűrű minden interaktív elemen. */ .foglalgo-alap :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--szin-fokusz); outline-offset: 2px; } .cim-serif { font-family: var(--betu-cim); font-weight: var(--vastagsag-felkover); line-height: var(--sormagassag-cim); letter-spacing: var(--betukoz-cim); } .hivatkozas { color: var(--szin-akcio); font-weight: var(--vastagsag-felkover); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--atmenet-gyors); } .hivatkozas:hover { color: var(--szin-akcio-hover); text-decoration-thickness: 2px; } .tabszam { font-variant-numeric: tabular-nums; } /* ============================== IKONOK ================================== */ /* Saját rajzolású, 24-es rácsú vonalikonok (sprite a bemutatóban). Mindig currentColor — a szín a szülő szövegszínéből jön. */ .ikon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; vertical-align: -0.2em; } .ikon--kicsi { width: 0.875rem; height: 0.875rem; } .ikon--nagy { width: 1.5rem; height: 1.5rem; } /* ============================== GOMBOK ================================== */ /* Változatok: (alap = elsődleges, terrakotta) · --masodlagos · --halk · --veszelyes · Méretek: --kicsi · --nagy · Egyéb: --teljes, --ikon, [aria-busy="true"] töltés. */ /* A `hidden` EREŐJE. Az alábbi `display: inline-flex` ERŐSEBB a böngésző alap `[hidden] { display: none }` szabályánál (osztály > elem), ezért a JS-ből állított `hidden` NÉMA MARAD: a gomb ott áll tovább. Élesben derült ki (N43): a regisztrációs varázsló ELSŐ lépésén ott maradt a „Vissza" gomb, pedig a kód elrejtette. Ugyanezt a csapdát a régi pult CSS-e már ismeri (`felulet/2-admin/fresha.css:159`) — ott is így, célzott szabállyal. */ .gomb[hidden] { display: none; } .gomb { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ter-2); height: var(--gomb-magassag); padding: 0 var(--ter-4); font-family: inherit; font-size: var(--meret-alap); font-weight: var(--vastagsag-felkover); line-height: 1; white-space: nowrap; color: var(--szin-akcio-szoveg); background: var(--szin-akcio); border: var(--vonal-vekony) solid var(--szin-akcio-korvonal); border-radius: var(--gomb-sugar); cursor: pointer; text-decoration: none; user-select: none; transition: background var(--atmenet-alap) var(--atmenet-ivelt), border-color var(--atmenet-alap) var(--atmenet-ivelt), color var(--atmenet-alap) var(--atmenet-ivelt); } .gomb:hover { background: var(--szin-akcio-hover); } .gomb:active { transform: translateY(1px); } .gomb--masodlagos { color: var(--szin-szoveg); background: var(--szin-felulet); border-color: var(--szin-vonal-eros); } .gomb--masodlagos:hover { background: var(--szin-hover); border-color: var(--szin-vonal-sotet); } .gomb--halk { color: var(--szin-szoveg-masodlagos); background: transparent; } .gomb--halk:hover { color: var(--szin-szoveg); background: var(--szin-hover); } .gomb--veszelyes { background: var(--szin-hiba); border-color: transparent; } [data-tema="sotet"] .gomb--veszelyes { color: var(--szin-inverz-szoveg); } .gomb--veszelyes:hover { filter: brightness(0.92); } .gomb--kicsi { height: var(--gomb-magassag-kicsi); padding: 0 var(--ter-3); font-size: var(--meret-kicsi); } .gomb--nagy { height: var(--gomb-magassag-nagy); padding: 0 var(--ter-6); font-size: var(--meret-nagy); } .gomb--teljes { width: 100%; } .gomb--ikon { width: var(--gomb-magassag); padding: 0; } .gomb--ikon.gomb--kicsi { width: var(--gomb-magassag-kicsi); } .gomb:disabled, .gomb[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .gomb[aria-busy="true"] { color: transparent; pointer-events: none; } .gomb--masodlagos[aria-busy="true"], .gomb--halk[aria-busy="true"] { --gomb-porgo: var(--szin-szoveg-halvany); } .gomb[aria-busy="true"]::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--gomb-porgo, var(--szin-akcio-szoveg)); border-top-color: transparent; animation: gomb-porges 0.7s linear infinite; } @keyframes gomb-porges { to { transform: rotate(360deg); } } /* ============================== ŰRLAP =================================== */ /* Szerkezet: .mezo-csoport > .mezo-cimke + .mezo (+ .mezo-sugo | .mezo-hiba) Hibás mező: .mezo--hibas + aria-invalid="true". */ .mezo-csoport { display: flex; flex-direction: column; gap: 0.375rem; } /* A `[hidden]` KÉNYSZERÍTÉSE (N43/c osztályhiba, N54-es előfordulás): a fenti `display: flex` origó-sorrendből erősebb a böngésző `[hidden] { display: none }`-jánál, ezért a JS-ből állított `hidden` néma maradna. Ugyanez a kivétel a pult saját `komponensek.css`-ében is áll — az őr (n43c-gomb-hidden) MINDEN lapon kéri, ahol az osztály display-t kap. */ .mezo-csoport[hidden] { display: none; } .mezo-cimke { font-size: var(--meret-kicsi); font-weight: var(--vastagsag-felkover); color: var(--szin-szoveg); } .mezo-cimke .opcionalis { font-weight: var(--vastagsag-normal); color: var(--szin-szoveg-halvany); } .mezo { width: 100%; height: var(--mezo-magassag); padding: 0 var(--ter-3); font-family: inherit; font-size: var(--meret-alap); color: var(--szin-szoveg); background: var(--szin-felulet); border: var(--vonal-vekony) solid var(--szin-vonal-eros); border-radius: var(--mezo-sugar); transition: border-color var(--atmenet-alap) var(--atmenet-ivelt); } /* ÉRINTŐKÉPERNYŐN LEGALÁBB 16 PX (N21, 2026-08-27). Az iOS Safari minden 16 px-nél kisebb betűs beviteli mezőre ránagyít fókuszáláskor, és nem nagyít vissza. A `--meret-alap` 15 px, tehát a szabály nélkül MINDEN mezőnk ilyen. Ez a lap a KOMPONENS-FORRÁS: aki innen másol, ezt is vigye magával. */ @media (pointer: coarse) { .mezo { font-size: max(1rem, var(--meret-alap)); } } .mezo::placeholder { color: var(--szin-szoveg-halvany); } .mezo:hover:not(:disabled):not(:focus-visible) { border-color: var(--szin-vonal-sotet); } .mezo:focus-visible { border-color: var(--szin-fokusz); outline-offset: 1px; } .mezo:disabled { background: var(--szin-hover); color: var(--szin-szoveg-halvany); cursor: not-allowed; } textarea.mezo { height: auto; min-height: 6rem; padding: var(--ter-2) var(--ter-3); resize: vertical; line-height: var(--sormagassag-alap); } .mezo--hibas, .mezo[aria-invalid="true"] { border-color: var(--szin-hiba); } .mezo-sugo { font-size: var(--meret-kicsi); color: var(--szin-szoveg-halvany); } .mezo-hiba { display: flex; align-items: flex-start; gap: 0.375rem; font-size: var(--meret-kicsi); font-weight: var(--vastagsag-felkover); color: var(--szin-hiba); } .mezo-hiba .ikon--kicsi { margin-top: 0.15em; } /* Legördülő: .valaszto burkolja a select.mezo-t, a nyilat CSS rajzolja. */ .valaszto { position: relative; } .valaszto select.mezo { appearance: none; padding-right: var(--ter-7); cursor: pointer; } .valaszto::after { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 1.75px solid var(--szin-szoveg-halvany); border-bottom: 1.75px solid var(--szin-szoveg-halvany); transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* Mező bal oldali ikonnal: .mezo-ikonos burkoló. */ .mezo-ikonos { position: relative; } .mezo-ikonos > .ikon { position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; color: var(--szin-szoveg-halvany); pointer-events: none; } .mezo-ikonos > .mezo { padding-left: 2.5rem; } /* Pipa és választógomb: natív vezérlő, márkára hangolva. */ .jelolo-sor { display: flex; align-items: flex-start; gap: var(--ter-2); font-size: var(--meret-alap); cursor: pointer; } .jelolo { width: 1rem; height: 1rem; margin: 0.2em 0 0; accent-color: var(--szin-akcio); cursor: pointer; flex-shrink: 0; } .jelolo-sor .jelolo-szoveg { line-height: 1.45; } .jelolo-sor .jelolo-segéd, .jelolo-sor .jelolo-seged { display: block; font-size: var(--meret-kicsi); color: var(--szin-szoveg-halvany); } /* Kapcsoló: */ .kapcsolo { appearance: none; width: 2.375rem; height: 1.375rem; margin: 0; border-radius: var(--sugar-teljes); background: var(--szin-hover-eros); border: var(--vonal-vekony) solid var(--szin-vonal-eros); position: relative; cursor: pointer; flex-shrink: 0; transition: background var(--atmenet-alap) var(--atmenet-ivelt), border-color var(--atmenet-alap) var(--atmenet-ivelt); } .kapcsolo::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--szin-felulet); border: var(--vonal-vekony) solid var(--szin-vonal-eros); transition: translate var(--atmenet-alap) var(--atmenet-ivelt); } .kapcsolo:checked { background: var(--szin-akcio); border-color: var(--szin-akcio-korvonal); } .kapcsolo:checked::after { translate: 1rem 0; background: var(--szin-akcio-szoveg); border-color: transparent; } /* ============================== JELVÉNYEK =============================== */ /* Állapotcímkék: (alap = semleges) · --siker · --figyelem · --hiba · --akcio Pöttyel: elsőként. */ .jelveny { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.4rem; padding: 0 0.563rem; font-size: var(--meret-apro); font-weight: var(--vastagsag-felkover); letter-spacing: 0.01em; white-space: nowrap; color: var(--szin-szoveg-masodlagos); background: var(--szin-hover-eros); border: var(--vonal-vekony) solid transparent; border-radius: var(--sugar-teljes); } .jelveny-pont { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex-shrink: 0; } .jelveny--siker { color: var(--szin-siker-szoveg); background: var(--szin-siker-tint); border-color: color-mix(in srgb, var(--szin-siker) 30%, transparent); } .jelveny--figyelem { color: var(--szin-figyelem); background: var(--szin-figyelem-tint); border-color: color-mix(in srgb, var(--szin-figyelem-elenk) 45%, transparent); } .jelveny--figyelem .jelveny-pont { background: var(--szin-figyelem-elenk); } .jelveny--hiba { color: var(--szin-hiba); background: var(--szin-hiba-tint); border-color: color-mix(in srgb, var(--szin-hiba) 30%, transparent); } .jelveny--akcio { color: var(--szin-akcio-szoveg-tinten); background: var(--szin-akcio-tint); border-color: color-mix(in srgb, var(--szin-marka) 35%, transparent); } /* ============================== RIASZTÁSOK ============================== */ /* (alap = tudnivaló) · --siker · --figyelem · --hiba Szerkezet: ikon + (.riasztas-cim + .riasztas-szoveg) + opcionális .riasztas-muvelet gomb és .riasztas-bezaras. A törzsszöveg mindig tinta — a hangulatot a tint-háttér és az ikon színe adja. */ .riasztas { display: flex; align-items: flex-start; gap: var(--ter-3); padding: var(--ter-4); background: var(--szin-felulet-finom); border: var(--vonal-vekony) solid var(--szin-vonal); border-radius: var(--sugar-nagy); } .riasztas > .ikon { margin-top: 0.1rem; color: var(--szin-szoveg-masodlagos); } .riasztas-tartalom { flex: 1; min-width: 0; } .riasztas-cim { margin: 0 0 0.125rem; font-size: var(--meret-alap); font-weight: var(--vastagsag-kover); color: var(--szin-szoveg); } .riasztas-szoveg { margin: 0; font-size: var(--meret-kicsi); color: var(--szin-szoveg-masodlagos); } .riasztas-muvelet { margin-top: var(--ter-2); } .riasztas-bezaras { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; margin: -0.25rem -0.25rem 0 0; background: none; border: 0; border-radius: var(--sugar-kicsi); color: var(--szin-szoveg-masodlagos); cursor: pointer; transition: background var(--atmenet-gyors), color var(--atmenet-gyors); } .riasztas-bezaras:hover { color: var(--szin-szoveg); background: color-mix(in srgb, var(--szin-szoveg) 8%, transparent); } .riasztas--siker { background: var(--szin-siker-tint); border-color: color-mix(in srgb, var(--szin-siker) 25%, transparent); } .riasztas--siker > .ikon { color: var(--szin-siker-szoveg); } .riasztas--figyelem { background: var(--szin-figyelem-tint); border-color: color-mix(in srgb, var(--szin-figyelem-elenk) 40%, transparent); } .riasztas--figyelem > .ikon { color: var(--szin-figyelem); } .riasztas--hiba { background: var(--szin-hiba-tint); border-color: color-mix(in srgb, var(--szin-hiba) 30%, transparent); } .riasztas--hiba > .ikon { color: var(--szin-hiba); } /* ============================== KÁRTYÁK ================================= */ .kartya { background: var(--szin-felulet); border: var(--vonal-vekony) solid var(--szin-vonal); border-radius: var(--sugar-nagy); padding: var(--ter-5); } .kartya--tomor { padding: var(--ter-4); } .kartya--csupasz { padding: 0; overflow: hidden; } /* Szolgáltatáskártya: kattintható kártya (button vagy a). Kijelölés: aria-pressed="true" vagy .szolgaltatas-kartya--kijelolt. */ .szolgaltatas-kartya { display: flex; flex-direction: column; gap: var(--ter-2); width: 100%; text-align: left; font: inherit; color: var(--szin-szoveg); cursor: pointer; transition: border-color var(--atmenet-alap) var(--atmenet-ivelt), background var(--atmenet-alap) var(--atmenet-ivelt); } .szolgaltatas-kartya:hover { border-color: var(--szin-vonal-sotet); } .szolgaltatas-kartya[aria-pressed="true"], .szolgaltatas-kartya--kijelolt { border-color: var(--szin-marka); box-shadow: inset 0 0 0 1px var(--szin-marka); } .szolgaltatas-fej { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ter-3); } .szolgaltatas-nev { margin: 0; font-size: var(--meret-cim-3); font-weight: var(--vastagsag-kover); font-family: var(--betu-cim); letter-spacing: var(--betukoz-cim); } .szolgaltatas-ar { font-weight: var(--vastagsag-felkover); font-variant-numeric: tabular-nums; white-space: nowrap; } .szolgaltatas-leiras { margin: 0; font-size: var(--meret-kicsi); color: var(--szin-szoveg-masodlagos); } .szolgaltatas-meta { display: flex; flex-wrap: wrap; gap: var(--ter-4); margin-top: var(--ter-1); font-size: var(--meret-kicsi); color: var(--szin-szoveg-halvany); } .szolgaltatas-meta span { display: inline-flex; align-items: center; gap: 0.375rem; } /* ============================== LÉPÉSJELZŐ ============================== */ /*
    >
  1. Az aktuális lépésen: aria-current="step". Mobilon csak az aktuális lépés címkéje látszik. */ /* Ugyanaz a csapda, mint a `.gomb`-nál: a `display: flex` elnyomja a `hidden` attribútumot. A sikerképernyőn a lépésjelzőt el KELL tüntetni — enélkül a „kész" kártya fölött ott maradt az 1–5. lépés sávja. */ .lepesjelzo[hidden] { display: none; } .lepesjelzo { display: flex; align-items: center; gap: var(--ter-2); margin: 0; padding: 0; list-style: none; } .lepes { display: flex; align-items: center; gap: var(--ter-2); min-width: 0; } .lepes:not(:last-child) { flex: 1; } .lepes:not(:last-child)::after { content: ""; flex: 1; height: 1px; min-width: var(--ter-4); background: var(--szin-vonal-eros); } .lepes--kesz:not(:last-child)::after { background: var(--szin-siker); } .lepes-jel { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; font-size: var(--meret-kicsi); font-weight: var(--vastagsag-felkover); font-variant-numeric: tabular-nums; color: var(--szin-szoveg-halvany); background: var(--szin-felulet); border: var(--vonal-vekony) solid var(--szin-vonal-eros); border-radius: 50%; } .lepes--kesz .lepes-jel { color: var(--foglalgo-feher); background: var(--foglalgo-erdo); border-color: var(--foglalgo-erdo); } .lepes--aktualis .lepes-jel { color: var(--szin-akcio-szoveg-tinten); border-color: var(--szin-marka); box-shadow: 0 0 0 3px var(--szin-fokusz-tint); font-weight: var(--vastagsag-kover); } .lepes-cimke { font-size: var(--meret-kicsi); font-weight: var(--vastagsag-felkover); color: var(--szin-szoveg-halvany); white-space: nowrap; } .lepes--kesz .lepes-cimke { color: var(--szin-szoveg-masodlagos); } .lepes--aktualis .lepes-cimke { color: var(--szin-szoveg); } @media (max-width: 37.5em) { .lepes:not(.lepes--aktualis) .lepes-cimke { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ============================== IDŐSÁVOK ================================ */ /* Cal.com-minta: a sávra kattintva a sáv semleges-sötétre vált, és mellette megjelenik a Foglalás gomb. Szerkezet:
    Betelt sáv: disabled. */ .idosav-lista { display: flex; flex-direction: column; gap: var(--ter-2); max-height: 26rem; overflow-y: auto; padding-right: var(--ter-1); scrollbar-width: thin; scrollbar-color: var(--szin-vonal-eros) transparent; } .idosav-par { display: flex; gap: var(--ter-2); } .idosav { flex: 1; height: var(--idosav-magassag); display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: var(--meret-alap); font-weight: var(--vastagsag-felkover); font-variant-numeric: tabular-nums; color: var(--szin-akcio-szoveg-tinten); background: var(--szin-felulet); border: var(--vonal-vekony) solid var(--szin-vonal-eros); border-radius: var(--sugar-alap); cursor: pointer; transition: border-color var(--atmenet-alap) var(--atmenet-ivelt), background var(--atmenet-alap) var(--atmenet-ivelt), color var(--atmenet-alap) var(--atmenet-ivelt); } .idosav:hover:not(:disabled) { border-color: var(--szin-marka); } .idosav[aria-pressed="true"] { color: var(--szin-inverz-szoveg); background: var(--szin-inverz-hatter); border-color: var(--szin-inverz-hatter); } .idosav:disabled { color: var(--szin-szoveg-halvany); background: transparent; border-color: var(--szin-vonal); opacity: 0.55; cursor: not-allowed; } .idosav-megerosit { display: none; flex: 1; height: var(--idosav-magassag); } /* A rendszer egyetlen szerzői mozgás-pillanata: a Foglalás gomb belépése. Csökkentett mozgásnál a --atmenet-alap 0 ms, így nincs animáció. */ .idosav-par--kijelolt .idosav-megerosit { display: inline-flex; animation: idosav-belepes var(--atmenet-alap) var(--atmenet-ivelt); } @keyframes idosav-belepes { from { opacity: 0; transform: translateX(-0.375rem); } } .idosav-datum { margin: 0 0 var(--ter-3); font-size: var(--meret-alap); font-weight: var(--vastagsag-kover); } .idosav-datum .halvany { font-weight: var(--vastagsag-normal); color: var(--szin-szoveg-halvany); } /* ============================== NAPTÁRRÁCS ============================== */ /* Hét hétfővel indul. Napállapotok: .naptar-nap--szabad (foglalható), [aria-pressed="true"] (kijelölt), .naptar-nap--ma (pötty), :disabled (múlt/zárva/betelt). */ .naptar { max-width: max-content; } .naptar-fej { display: flex; align-items: center; justify-content: space-between; gap: var(--ter-3); margin-bottom: var(--ter-3); } .naptar-cim { margin: 0; font-size: var(--meret-alap); font-weight: var(--vastagsag-kover); } .naptar-leptek { display: flex; gap: var(--ter-1); } .naptar-racs { display: grid; grid-template-columns: repeat(7, var(--naptar-cella)); gap: var(--ter-1); } .naptar-hetnap { height: 2rem; display: grid; place-items: center; font-size: var(--meret-apro); font-weight: var(--vastagsag-felkover); color: var(--szin-szoveg-halvany); } .naptar-nap { position: relative; width: var(--naptar-cella); height: var(--naptar-cella); display: grid; place-items: center; font-family: inherit; font-size: var(--meret-alap); font-variant-numeric: tabular-nums; color: var(--szin-szoveg); background: transparent; border: 0; border-radius: var(--sugar-alap); cursor: pointer; transition: background var(--atmenet-gyors), color var(--atmenet-gyors); } .naptar-nap--szabad { background: var(--szin-hover); font-weight: var(--vastagsag-felkover); } .naptar-nap--szabad:hover { background: var(--szin-hover-eros); } .naptar-nap--ma::after { content: ""; position: absolute; bottom: 0.3rem; left: 50%; translate: -50% 0; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--szin-marka); } .naptar-nap[aria-pressed="true"] { color: var(--szin-inverz-szoveg); background: var(--szin-inverz-hatter); font-weight: var(--vastagsag-kover); } .naptar-nap[aria-pressed="true"].naptar-nap--ma::after { background: var(--szin-inverz-szoveg); } .naptar-nap:disabled { color: var(--szin-szoveg-halvany); background: transparent; opacity: 0.45; cursor: default; } .naptar-nap--ures { visibility: hidden; pointer-events: none; } /* ============================== TÁBLÁZAT ================================ */ /* Mindig .tablazat-keret burkolóban — az adja a keretet és a vízszintes görgetést mobilon. Számoszlop: .tablazat-szam. */ .tablazat-keret { border: var(--vonal-vekony) solid var(--szin-vonal); border-radius: var(--sugar-nagy); background: var(--szin-felulet); overflow-x: auto; } .tablazat { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--meret-alap); } .tablazat th { padding: var(--ter-2) var(--tablazat-cella-vizszintes); font-size: var(--meret-kicsi); font-weight: var(--vastagsag-felkover); text-align: left; color: var(--szin-szoveg-halvany); background: var(--szin-felulet-finom); border-bottom: var(--vonal-vekony) solid var(--szin-vonal-eros); white-space: nowrap; } .tablazat td { padding: var(--tablazat-cella-fuggoleges) var(--tablazat-cella-vizszintes); border-bottom: var(--vonal-vekony) solid var(--szin-vonal); vertical-align: middle; } .tablazat tbody tr:last-child td { border-bottom: 0; } .tablazat tbody tr { transition: background var(--atmenet-gyors); } .tablazat tbody tr:hover { background: var(--szin-hover); } .tablazat-szam, .tablazat th.tablazat-szam { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tablazat .tabszam { white-space: nowrap; } .tablazat-szemely { display: flex; align-items: center; gap: var(--ter-3); min-width: 0; } .tablazat-szemely-nev { font-weight: var(--vastagsag-felkover); line-height: var(--sormagassag-szoros); } .tablazat-szemely-mellek { font-size: var(--meret-kicsi); color: var(--szin-szoveg-halvany); line-height: 1.4; } .tablazat-muvelet { display: flex; gap: var(--ter-1); justify-content: flex-end; } /* Rendezhető fejléc: