/* css/admin_megjelenes.css — az admin (szerkesztő) oldalak vizuális
   megújítása (2026-10-04, jóváhagyott "vegyes minta", Mozi Noir stílus).

   Minden admin oldal a saját stíluslapjai UTÁN, a css/utility.css ELŐTT
   tölti be, és csak felülír — a régi kinézetre való visszaálláshoz elég a
   <link>-jét kivenni. A Mozi Noir színeit a meglévő --a-* téma-változók
   felülírásával kapja meg minden admin elem; ezen felül üveghatású
   kártyák, piros→narancs fő gombok és fülsáv, kiemelt fókusz-keret, és
   (a fülsávos oldalakon) a hulló sakura háttér (js/sakura.js). */

:root {
    --a-bg: #0a0a0d;
    --a-card: #16161b;
    --a-card-alt: #121216;
    --a-hover: #22222a;
    --a-border: #2c2c34;
    --a-border-soft: #24242b;
    --a-text-faint2: #3a3a44;

    --kiemelo: #e50914;
    --kiemelo-2: #ff7a18;
    --kiemelo-atmenet: linear-gradient(135deg, var(--kiemelo), var(--kiemelo-2));
    --uveg: rgba(22, 22, 28, 0.78);
    --uveg-keret: rgba(255, 255, 255, 0.09);
    --mezo-hatter: rgba(255, 255, 255, 0.045);
    --arnyek: 0 10px 30px rgba(0, 0, 0, 0.55);
    --feny: 0 0 0 1px rgba(229, 9, 20, 0.6), 0 14px 40px rgba(229, 9, 20, 0.35);
    --hatter-dekor:
        radial-gradient(1200px 520px at 50% -12%, rgba(229, 9, 20, 0.20), transparent 60%),
        radial-gradient(900px 480px at 100% 105%, rgba(255, 122, 24, 0.08), transparent 60%);
    --szirom-attetszoseg: 0.6;
}
[data-theme="light"] {
    --a-bg: #f6f3f0;
    --a-card: #ffffff;
    --a-card-alt: #faf7f4;
    --a-hover: #f3ede8;
    --a-border: #e3d9cf;
    --a-border-soft: #ece4dc;
    --a-text-faint2: #d6ccc2;

    --kiemelo: #d90b16;
    --kiemelo-2: #f2650c;
    --uveg: rgba(255, 255, 255, 0.86);
    --uveg-keret: #e8dfd6;
    --mezo-hatter: #faf7f4;
    --arnyek: 0 10px 30px rgba(60, 20, 10, 0.10);
    --feny: 0 0 0 1px rgba(217, 11, 22, 0.45), 0 14px 34px rgba(217, 11, 22, 0.18);
    --hatter-dekor:
        radial-gradient(1200px 520px at 50% -12%, rgba(229, 9, 20, 0.09), transparent 60%),
        radial-gradient(700px 420px at 0% 60%, rgba(255, 140, 180, 0.10), transparent 60%);
    --szirom-attetszoseg: 0.8;
}

/* ---------- Alap ---------- */
body {
    background: var(--hatter-dekor), var(--a-bg);
    background-attachment: fixed;
}

/* ---------- Hulló sakura (ugyanaz, mint a nyilvános oldalakon) ----------
   JAVÍTVA (2026-10-23): a szabályok a közös css/tema_kozos.css-be kerültek (a
   megjelenes.css-ben szó szerint ugyanez volt); itt csak a fenti --szirom-attetszoseg. */

/* ---------- Fülsáv: üveg, piros→narancs aktív fül ---------- */
.admin-fulek {
    background: var(--uveg);
    border: 1px solid var(--uveg-keret);
    box-shadow: var(--arnyek);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="light"] .admin-fulek { box-shadow: var(--arnyek); }
.admin-ful:hover, .admin-ful:focus-visible { background: var(--a-hover); color: var(--kiemelo); }
.admin-ful.aktiv { background: var(--kiemelo-atmenet); color: #fff; box-shadow: var(--feny); }

/* ---------- Fejléc-sor (cím + ikonok) ---------- */
.topbar h1 .admin-cim-kep { color: var(--kiemelo); }
.topbar-icon-link:hover, .topbar-icon-link:focus-visible, .theme-toggle-btn:hover { color: var(--kiemelo-2); }
.user-menu-dropdown {
    background: var(--uveg);
    border: 1px solid var(--uveg-keret);
    border-radius: 14px;
    box-shadow: var(--arnyek);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

/* ---------- Kártyák (űrlap-dobozok) ---------- */
/* backdrop-filter szándékosan NINCS: a kártyákban lévő position: fixed
   elemeket (törlés-megerősítő ablak, dátumválasztó) a kártyához kötné. */
.card {
    background: var(--a-card);
    border: 1px solid var(--uveg-keret);
    border-radius: 20px;
    box-shadow: var(--arnyek);
}

label { letter-spacing: 0.02em; }

/* ---------- Mezők ---------- */
input[type="text"], input[type="url"], input[type="number"], input[type="date"],
input[type="password"], input[type="email"], input[type="search"],
select, textarea,
.search-box input, .search-box input[type="text"] {
    background: var(--mezo-hatter);
    border: 1px solid var(--a-border);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
input[type="text"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="password"]:focus, input[type="email"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
    outline: none;
    border-color: var(--kiemelo);
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.18);
}
.custom-datalist-dropdown {
    background: var(--uveg);
    border: 1px solid var(--uveg-keret);
    border-radius: 12px;
    box-shadow: var(--arnyek);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* ---------- Gombok ---------- */
.search-box button {
    border-radius: 999px;
    background: var(--a-hover);
    border: 1px solid var(--a-border);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.search-box button:hover { background: var(--a-hover); border-color: var(--kiemelo); color: var(--kiemelo); }

button[type="button"].main-action,
button[type="submit"].main-action,
#preview-confirm {
    background: var(--kiemelo-atmenet);
    color: #fff;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--feny);
    transition: transform 0.15s ease, filter 0.2s ease;
}
button[type="button"].main-action:hover,
button[type="submit"].main-action:hover,
#preview-confirm:hover { background: var(--kiemelo-atmenet); filter: brightness(1.08); transform: translateY(-1px); }

.clear-action, .delete-action, #preview-cancel { border-radius: 999px; }

.custom-file-btn { border-radius: 999px; background: var(--mezo-hatter); }
.custom-file-btn:hover { border-color: var(--kiemelo); color: var(--kiemelo); }

.mode-badge { border-radius: 999px; }

/* ---------- Keresési találatok, felugrók ---------- */
.search-results, .search-result-item { border-radius: 12px; }
.search-result-item .sr-id, .sr-id { color: var(--kiemelo-2); }

#preview-content, #emby-block-content {
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(229, 9, 20, 0.15);
}

#app-toast { border-radius: 14px; }

/* Ürítés / Törlés gomb a szerkesztők alján — a css/utility.css !important
   szabályait csak !important-tel lehet felülírni (ezért a nagyobb
   specificitású a./button. előtag is). */
a.editor-clear-btn {
    border-radius: 999px !important;
    background: var(--a-hover) !important;
    color: var(--a-text) !important;
    border: 1px solid var(--a-border) !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
}
a.editor-clear-btn:hover { border-color: var(--kiemelo-2) !important; color: var(--kiemelo-2) !important; }
button.editor-delete-btn { border-radius: 999px !important; }

/* Utazás szerkesztő: Ürítés gomb ugyanolyan másodlagos stílusban */
.form-actions .clear-action {
    background: var(--a-hover);
    color: var(--a-text);
    border: 1px solid var(--a-border);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.form-actions .clear-action:hover { border-color: var(--kiemelo-2); color: var(--kiemelo-2); }

/* Kötegelt felvitel: "A látható sorok mentése" fő gomb */
#batch-save-btn {
    background: var(--kiemelo-atmenet);
    color: #fff;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--feny);
}
#batch-save-btn:hover { background: var(--kiemelo-atmenet); filter: brightness(1.08); }

/* JAVÍTVA (2026-10-05): munkamenet-visszaszámláló (DEBUG_SHOW_SESSION_COUNTDOWN,
   js/admin_heartbeat.js, ill. a Dokumentáció oldalon public_session_watcher.js) — a korábbi fix narancs (#ff8a33) helyett a téma kiemelő
   színátmenete; méret/pozíció/betűtípus változatlan (azt a JS adja). */
#debug-session-countdown { color: var(--kiemelo-2); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #debug-session-countdown {
        background: var(--kiemelo-atmenet);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* (2026-10-12) Második jelszó mezői: "text" típusúak, hogy a böngésző ne töltse ki
   automatikusan az admin jelszóval — a karaktereket ez takarja el (js/admin/masodik_jelszo_mezo.js). */
.masodik-jelszo-mezo { -webkit-text-security: disc; }

/* (2026-10-12) fiókmenü: elválasztó vonal a további menüpontok előtt */
.fiok-menu-elvalaszto { height: 1px; background: var(--a-border); margin: 4px 8px; }

/* (2026-10-12, jóváhagyott minta: mozgo_menuikonok_minta.html, "B") — mozgó fiókmenü-ikonok:
   á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.
   JAVÍTVA (2026-10-23): a .mi / a:hover > .mi / .mi-beall / .mi-kilep szabály a közös
   css/tema_kozos.css-be került (a megjelenes.css-ben szó szerint ugyanez volt). A .mi-b
   szándékosan itt (és a védett 7f4c2a9e1b6d3058.css-ben) maradt: a nyilvános közös
   fájlba nem kerülhet a védett oldalra utaló szabály. */
.mi-b { --mi-allo: url('../icon/fiok_b.png'); --mi-mozgo: url('../icon/fiok_b.webp'); }
.user-menu-dropdown a > .mi { vertical-align: -0.3rem; margin-right: 0.3rem; }

/* ---------- Fejléc ikonsor (2026-10-12, jóváhagyott minta: szerkeszto_fejlec_vegleges_minta.html, "E") ----------
   A téma és a súgó kerek gomb, a Vissza és a CSV feliratos kapszula-gomb (partials/admin_topbar.php
   .topbar-gomb); rámutatáskor piros→narancs kitöltés, fehér ikon. A vissza-nyíl és a CSV ikon
   maszk-ikon (mint a fiókmenüé): a vissza-nyíl áll, és csak rámutatáskor mozog. */
.topbar > div { gap: .4rem; }
.topbar .theme-toggle-btn,
.topbar .topbar-icon-link {
    width: 2.2rem; height: 2.2rem; border-radius: 999px;
    background: var(--mezo-hatter); border: 1px solid var(--uveg-keret); color: var(--a-text-dim);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.topbar .topbar-gomb { width: auto; min-width: 2.2rem; padding: 0 .75rem; gap: .4rem; }
.topbar-felirat { font: 600 .8rem/1 "Segoe UI", system-ui, sans-serif; }
.topbar .theme-toggle-btn:hover,
.topbar .topbar-icon-link:hover,
.topbar .topbar-icon-link:focus-visible { background: var(--kiemelo-atmenet); border-color: transparent; color: #fff; transform: translateY(-1px); }
.topbar .topbar-icon-link:hover i,
.topbar .topbar-icon-link:focus-visible i,
.topbar .theme-toggle-btn:hover::before { transform: none; }
.topbar .topbar-icon-link > .mi { width: 1.2rem; height: 1.2rem; }
.topbar .topbar-icon-link > .mi-csv,
.topbar .topbar-icon-link > .mi-sugo { width: 1.25rem; height: 1.25rem; }
.topbar .topbar-icon-link:hover > .mi,
.topbar .topbar-icon-link:focus-visible > .mi { -webkit-mask-image: var(--mi-mozgo); mask-image: var(--mi-mozgo); background-color: currentColor; }
.mi-vissza { --mi-allo: url('../icon/fejlec_vissza.png'); --mi-mozgo: url('../icon/fejlec_vissza.webp'); }
.mi-csv { --mi-allo: url('../icon/fejlec_csv.png'); --mi-mozgo: url('../icon/fejlec_csv.png'); }
.mi-sugo { --mi-allo: url('../icon/fejlec_sugo.png'); --mi-mozgo: url('../icon/fejlec_sugo.webp'); } /* súgó (billentyűparancsok), 2026-10-12 */

/* ---------- Téma-váltó ikon és fiókgomb (2026-10-12, a felhasználó kérésére — egységesítés) ----------
   A téma-váltó ikonja ugyanaz, mint a nyilvános oldalakon: 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) — icon/fejlec_tema_*.png és *_kockak.png. A fiókgomb
   ("Kaleh ▾") keretes kapszula, mint a nyilvános oldalak fiókgombja. */
/* JAVÍTVA (2026-10-12): a mozgó WebP helyett képcsík (7 kocka) + CSS-animáció — a böngésző a
   mozgó képet a háttérben folyamatosan lejátszotta, így rámutatáskor nem az elejéről indult (egy
   pillanatra a másik ikon látszott). Most minden rámutatás az első kockától, egyszer játssza le.
   JAVÍTVA (2026-10-23): a --tema-allo / --tema-sor változók, a .theme-toggle-btn:hover::before
   képcsík-animáció (@keyframes tema-valtas) és érintős (hover: none) változatuk a közös
   css/tema_kozos.css-be került (a megjelenes.css-ben szó szerint ugyanez volt). */
.theme-toggle-btn::before {
    content: ""; width: 1.2rem; height: 1.2rem; background-color: currentColor;
    -webkit-mask: var(--tema-allo) center / contain no-repeat; mask: var(--tema-allo) center / contain no-repeat;
}

/* (2026-10-12, a felhasználó kérésére) Érintős eszközön nincs rámutatás — a téma-váltón ott
   nincs animáció és narancs háttér, az ikon azt mutatja, amire vált: világos módban a Hold,
   sötét módban a Nap (mint a nyilvános oldalakon). */
@media (hover: none) {
    .topbar .theme-toggle-btn:hover { background: var(--mezo-hatter); border-color: var(--uveg-keret); color: var(--a-text-dim); transform: none; }
}
.user-menu-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 2.2rem; padding: 0 .8rem; border-radius: 999px;
    border: 1px solid var(--uveg-keret); background: var(--uveg); color: var(--a-text-dim);
    font: 600 .85rem/1 "Segoe UI", system-ui, sans-serif;
    transition: color .2s ease, background .2s ease;
}
.user-menu-btn:hover { color: var(--a-text); background: var(--a-hover); }