/* css/tema_kozos.css — a nyilvános és az admin oldalak KÖZÖS téma-szabályai.
   ÚJ FÁJL (2026-10-23, jóváhagyott kódtisztítás): az alábbi szabályok eddig szó szerint
   két-két helyen szerepeltek (css/style.css ↔ css/admin_common.css, ill.
   css/megjelenes.css ↔ css/admin_megjelenes.css) — most csak itt.

   Betöltés: partials/head_public.php és partials/admin_head.php (és a hiba/*.html
   oldalak), mindig az ELSŐ saját stíluslapként (a Font Awesome után, minden más
   saját CSS előtt). Az ide került szabályokat egyik később betöltődő fájl sem írja
   felül azonos specificitással, ezért a végeredmény ugyanaz, mint eddig; ha mégis
   felül kellene írni valamelyiket, azt a később betöltődő fájlban kell megtenni.
   A relatív képútvonalak (../icon/...) a css/ mappához képest értendők. */

/* ---------- 1. Görgetősáv (Chromium/WebKit) — a sín (track) színe téma-függő,
   az a style.css-ben, ill. az admin_common.css-ben maradt ---------- */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e50914, #ff7a18); /* Safari: színátmenetes csúszka */
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff2a2a, #ff8a33);
}

/* ---------- 2. Téma-váltó gomb ---------- */
.theme-toggle-btn:hover {
    transform: translateY(-2px);
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* (2026-10-12) Az ikon maszk-ikon: világos módban a Nap (rámutatáskor holddá válik),
   sötét módban a Hold (rámutatáskor nappá válik). A mozgó WebP helyett képcsík
   (7 kocka) + CSS-animáció — így minden rámutatás az első kockától, egyszer játssza
   le. A gomb mérete és a ::before alapállapota oldaltípusonként eltér, az a
   megjelenes.css-ben, ill. az admin_megjelenes.css-ben van. */
:root { --tema-allo: url('../icon/fejlec_tema_hold.png'); --tema-sor: url('../icon/fejlec_tema_hold_kockak.png'); }
[data-theme="light"] { --tema-allo: url('../icon/fejlec_tema_nap.png'); --tema-sor: url('../icon/fejlec_tema_nap_kockak.png'); }
.theme-toggle-btn:hover::before {
    -webkit-mask-image: var(--tema-sor); mask-image: var(--tema-sor);
    -webkit-mask-size: 700% 100%; mask-size: 700% 100%;
    animation: tema-valtas 0.42s steps(6) forwards;
    transform: none;
}
@keyframes tema-valtas {
    from { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
    to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
/* (2026-10-12) Érintős eszközön nincs rámutatás, koppintás után a "rámutatott" állapot
   beragadna — ott nincs animáció, és az ikon azt mutatja, amire vált: világos módban a
   Hold, sötét módban a Nap. (A gomb hátterének visszaállítása oldaltípusonként eltér,
   az a megjelenes.css-ben, ill. az admin_megjelenes.css-ben van.) */
@media (hover: none) {
    :root { --tema-allo: url('../icon/fejlec_tema_nap.png'); }
    [data-theme="light"] { --tema-allo: url('../icon/fejlec_tema_hold.png'); }
    .theme-toggle-btn:hover::before {
        -webkit-mask: var(--tema-allo) center / contain no-repeat; mask: var(--tema-allo) center / contain no-repeat;
        animation: none;
    }
}

/* ---------- 3. Toast értesítő — megjelenített állapot (az alapállapot és a színek
   oldaltípusonként eltérnek: style.css, ill. admin_common.css) ---------- */
#app-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- 4. Hulló sakura háttér (js/sakura.js) — a szirmok átlátszóságát
   (--szirom-attetszoseg) a megjelenes.css / admin_megjelenes.css adja ---------- */
.sakura-reteg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.sakura {
    position: absolute;
    top: -40px;
    width: var(--m);
    height: var(--m);
    opacity: var(--szirom-attetszoseg);
    animation: sakura-hull var(--t) linear var(--k) infinite;
    will-change: transform;
}
.sakura > span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--kep) center / contain no-repeat;
    animation: sakura-leng var(--l) ease-in-out var(--k) infinite alternate;
}
@keyframes sakura-hull {
    0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); }
    100% { transform: translate3d(var(--sod), 108vh, 0) rotate(var(--f)); }
}
@keyframes sakura-leng {
    0%   { transform: translateX(-26px) rotateY(0deg) rotateX(10deg); }
    100% { transform: translateX(26px) rotateY(180deg) rotateX(40deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sakura, .sakura > span { animation: none; }
    .sakura { top: var(--y); }
}

/* ---------- 5. Mozgó fiókmenü-ikonok (2026-10-12, jóváhagyott minta:
   mozgo_menuikonok_minta.html, "B") — állnak, és csak rámutatáskor mozognak; a betű
   színét veszik fel, rámutatáskor pirosak. Az ikon maszk (átlátszó PNG / mozgó WebP),
   a színt a background-color adja. Az oldaltípus-saját ikonok (.mi-belep, .mi-vissza,
   .mi-csv, .mi-sugo, .mi-b) a saját stíluslapjukban maradtak. ---------- */
.mi { display: inline-block; flex-shrink: 0; width: 1.25rem; height: 1.25rem; background-color: currentColor;
    -webkit-mask: var(--mi-allo) center / contain no-repeat; mask: var(--mi-allo) center / contain no-repeat; }
a:hover > .mi { -webkit-mask-image: var(--mi-mozgo); mask-image: var(--mi-mozgo); background-color: var(--kiemelo); }
.mi-beall { --mi-allo: url('../icon/fiok_beallitas.png'); --mi-mozgo: url('../icon/fiok_beallitas.webp'); }
.mi-kilep { --mi-allo: url('../icon/fiok_kilepes.png'); --mi-mozgo: url('../icon/fiok_kilepes.webp'); }