/* css/utility.css — a korábbi style="..." attribútumok helyettesítői.
 *
 * ÚJ FÁJL (2026-09-30, jóváhagyott CSP-javítás: a style-src-ből kikerül az
 * 'unsafe-inline'). Az oldal (PHP-sablonok és a JS által generált HTML)
 * korábban style="..." attribútumokat használt; ezeket a böngésző az
 * 'unsafe-inline' nélkül letiltaná. Helyettük itt vannak ugyanazok a
 * deklarációk osztályként.
 *
 * Miért !important? Egy style="..." attribútum MINDEN normál stíluslap-szabályt
 * felülír. Hogy a kinézet pontosan ugyanaz maradjon, ezek a szabályok
 * !important-tal kapják meg ugyanezt az elsőbbséget.
 *
 * KIVÉTEL: .u-dn (display:none) SZÁNDÉKOSAN !important NÉLKÜL — azokon az
 * elemeken van, amelyeket a JS később élőben megjelenít (el.style.display =
 * 'block'/'flex'), és ennek felül kell tudnia írni.
 *
 * Betöltés: minden oldalon a LEGUTOLSÓ stíluslap a <head>-ben.
 */

/* ============ Megjelenítés / láthatóság ============ */
.u-hidden     { display: none !important; }       /* sosem jelenik meg, vagy JS classList-tel kapcsolja */
.u-dn         { display: none; }                  /* JS style.display-jel jeleníti meg — lásd fent */
.u-di         { display: inline !important; }
.u-invisible  { visibility: hidden !important; }

/* ============ Atomi segédosztályok ============ */
.u-mb-0       { margin-bottom: 0 !important; }
.u-mb-06      { margin-bottom: 0.6rem !important; }
/* JAVÍTVA (2026-10-05): kódösszevonás — a sehol nem használt .u-mb-1, .anime-modal-*, .u-flex, .u-label-100, .u-break-word és .series-modal-meta-text osztályok törölve. */
.u-mt-0       { margin-top: 0 !important; }
.u-mt-02      { margin-top: 0.2rem !important; }
.u-mt-12      { margin-top: 1.2rem !important; }
.u-mt-15      { margin-top: 1.5rem !important; }
.u-ta-center  { text-align: center !important; }
.u-fw-normal  { font-weight: normal !important; }
.u-fs-08      { font-size: 0.8rem !important; }
.u-fs-085     { font-size: 0.85rem !important; }
.u-c-888      { color: #888 !important; }
.u-c-faint-admin { color: var(--a-text-faint) !important; }
.u-c-orange   { color: #ff7a18 !important; }
.u-c-green    { color: #52b54b !important; }
.u-c-red      { color: #ff4d4d !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-flex-2     { flex: 2 !important; }
.u-flex-fill  { flex: 1 !important; min-width: 0 !important; }
.u-flex-center { display: flex !important; justify-content: center !important; }
.u-maxw-220   { max-width: 220px !important; }
.u-minw-70    { min-width: 70px !important; }
.u-minw-80    { min-width: 80px !important; }
.u-minw-90    { min-width: 90px !important; }
.u-minw-130   { min-width: 130px !important; }
.u-minw-140   { min-width: 140px !important; }
.u-minw-150   { min-width: 150px !important; }
.u-minw-160   { min-width: 160px !important; }
.u-minw-180   { min-width: 180px !important; }
.u-bg-222     { background-color: #222 !important; }

/* ============ Ismétlődő összetett minták (PHP-sablonok) ============ */
/* Nyilvános oldalak: cím + darabszám + szűrők sora */
.u-title-row  { display: flex !important; align-items: center !important; gap: 15px !important; flex-wrap: wrap !important; }
/* Admin szerkesztők: gombsor (Mentés / Ürítés / Lomtárba) */
.u-btn-row    { display: flex !important; gap: 0.8rem !important; margin-top: 0.5rem !important; }
.u-btn-row.u-mt-15 { margin-top: 1.5rem !important; }
.editor-clear-btn {
    flex: 1 !important; text-align: center !important; padding: 0.9rem !important; background: #ff7a18 !important;
    color: #1a1a1a !important; border-radius: 0.4rem !important; font-size: 1rem !important; font-weight: bold !important;
    text-decoration: none !important; box-sizing: border-box !important;
}
.editor-delete-btn {
    flex: 1 !important; padding: 0.9rem !important; background: transparent !important; border: 1px solid #ff4d4d !important;
    color: #ff4d4d !important; border-radius: 0.4rem !important; font-size: 1rem !important; font-weight: bold !important;
    cursor: pointer !important;
}
/* Admin: "Nincs (találat / rögzített tétel)." üzenet a keresőlisták alatt */
.u-empty-note { color: var(--a-text-faint) !important; padding: 0.8rem 1rem !important; margin: 0 !important; }
/* Beállítások: kártya-címek */
.u-card-h2    { margin: 0 0 1.2rem 0 !important; font-size: 1.15rem !important; }
/* 2FA oldal: "Vissza a Beállításokhoz" szöveg-gomb */
.totp-abandon-btn {
    background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important;
    color: var(--a-text-faint) !important; font-size: 0.85rem !important; text-decoration: underline !important; font-family: inherit !important;
}
.totp-qr-box  { margin: 0 auto 1.2rem auto !important; width: 200px !important; }
/* Anime tömeges felvitel */
.batch-show-more-btn {
    background: none !important; border: 1px solid var(--a-text-faint2) !important; color: var(--a-text-muted) !important;
    padding: 0.6rem 1.2rem !important; border-radius: 0.4rem !important; cursor: pointer !important; font-size: 0.85rem !important;
}
.batch-submit-bar-top { margin-bottom: 1rem !important; margin-top: 0 !important; }
/* A tömeges felvitelnél az alapból rejtett sorok: a JS betöltéskor élő
   style.display = 'none'-ra cseréli (a sor-logika azt olvassa), ez csak a
   villanást akadályozza meg addig. */
.batch-row--kezdetben-rejtett { display: none; }

/* ============ Nyilvános oldalak: JS által generált elemek ============ */
.grid-error-msg { color: #ff4d4d !important; padding: 1rem !important; text-align: center !important; }
.grid-empty-msg { color: var(--text-faint) !important; grid-column: 1 / -1 !important; text-align: center !important; padding: 3rem 0 !important; font-size: 1.1rem !important; }
.stats-error-msg { color: #ff4d4d !important; text-align: center !important; padding: 2rem !important; }
.stats-note-msg  { color: var(--text-faint) !important; text-align: center !important; }
.u-c-text-faint  { color: var(--text-faint) !important; }
/* "Meglepetés" / újrasorsolás gombok (anime: #modal-reroll-btn, könyv/SW: #surprise-modal-reroll) */
.reroll-btn {
    width: 100% !important; padding: 8px 16px !important; border: 1px solid transparent !important; border-radius: 1rem !important;
    box-sizing: border-box !important; font-weight: bold !important; cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}
.reroll-btn--mt10 { margin-top: 10px !important; }
.reroll-btn--mt14 { margin-top: 14px !important; }
/* Könyv/SW/Manga kártyák és sorozat-lista sorai */
.card-meta-author   { font-size: 0.85rem !important; color: var(--text-muted) !important; margin-bottom: 2px !important; }
.card-meta-genre    { font-size: 0.8rem !important; color: var(--primary) !important; font-weight: bold !important; }
.card-meta-comic    { font-size: 0.72rem !important; color: #5bc0be !important; font-style: italic !important; margin-top: 2px !important; }
.card-meta-price    { font-size: 0.8rem !important; color: var(--text-muted) !important; margin-top: 2px !important; }
.series-item-subtitle   { font-size: 0.8rem !important; color: var(--text-faint) !important; }

/* ============ Admin: JS által generált elemek ============ */
.u-icon-13 { width: 1.3rem !important; height: 1.3rem !important; }
.preview-emby-link {
    display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; color: #52b54b !important;
    text-decoration: none !important; font-weight: bold !important; margin-top: 0.6rem !important;
}
.draft-restore-yes-btn {
    background: #ff7a18 !important; color: #000 !important; border: none !important; padding: 0.4rem 0.9rem !important;
    border-radius: 0.3rem !important; font-weight: bold !important; cursor: pointer !important; margin-right: 0.5rem !important;
}
.draft-restore-no-btn {
    background: transparent !important; color: #ff7a18 !important; border: 1px solid #ff7a18 !important; padding: 0.4rem 0.9rem !important;
    border-radius: 0.3rem !important; cursor: pointer !important;
}

/* ============ Billentyűzetes használat (2026-10-23) ============
   A JS-ből role="button"-ná tett elemek (kártyák, jelvények, szívecske, Emby-
   kapcsoló, kötet-ikon) és a legördülők opciói Tab-bal / nyilakkal is elérhetők —
   a fókusz látható jelölése (csak billentyűzetes fókusznál, :focus-visible). */
.anime-card:focus-visible { outline: none !important; transform: translateY(-6px); filter: drop-shadow(0 0 1px rgba(229, 9, 20, 1)) drop-shadow(0 0 4px rgba(229, 9, 20, 0.6)) drop-shadow(0 14px 26px rgba(229, 9, 20, 0.5)); }
.anime-card:focus-visible .anime-poster-wrapper { outline: 3px solid var(--kiemelo-2, #ff7a18); outline-offset: 2px; }
.series-badge:focus-visible, .sw-badge:focus-visible, .favorite-badge:focus-visible,
.emby-filter-pill:focus-visible, .series-modal-item-status:focus-visible {
    outline: 2px solid var(--kiemelo-2, #ff7a18) !important; outline-offset: 2px !important;
}
.custom-select-option:focus-visible { outline: 2px solid var(--kiemelo-2, #ff7a18) !important; outline-offset: -2px !important; background: var(--overlay-bg-06); }
/* A felugró ablak doboza csak tartalékként kap fókuszt (ha nincs benne gomb) — keret nélkül. */
[role="dialog"]:focus, [role="alertdialog"]:focus { outline: none; }