/* =============================================================================
   far360 — LIQUID GLASS GOMB-RENDSZER (iOS 26 hang, far360 paletta)
   Megrendelői döntés: 2026-09-20 — felülírja a 2026-09-19-i „árnyék/üveg nincs"
   szabályt. Részletek és a teljes mért táblázat: DESIGN.md.

   EGY rendszer, négy változat: .btn-f (primary) · .btn-f-outline (secondary) ·
   .btn-f-ghost · .btn-f-danger. A régi osztálynevek VÁLTOZATLANUL működnek.

   KONTRASZT — a mérés a TÉNYLEGES háttér fölött történik, nem a tokennel: az üveg
   áttetsző, tehát a felirat a kikeveredett felülethez képest olvasható. A legrosszabb
   esetek (4 háttér × 5 állapot, küszöb 4,5:1) mérve: primary 6,21:1 · secondary
   10,02:1 · ghost 13,59:1 · danger 7,14:1 · letiltott 5,54:1. A teljes táblázat a
   DESIGN.md „Liquid Glass gomb-rendszer" szakaszában áll.
   A ghost SÖTÉT felületen fehér feliratot kap — ink felirattal ott 1:1 lenne.
   ============================================================================= */
.btn-f,
.btn-f-outline,
.btn-f-ghost,
.btn-f-danger,
input[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    /* WCAG 2.5.5 — 44×44 px érintési méret MINDEN eszközön, nem csak mobilon. */
    min-height: 44px;
    min-width: 44px;
    padding: 0.6em 1.5em;
    border: 1px solid var(--glass-line-soft);
    border-radius: var(--f-radius-btn);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /* Az üveg homálya; a saturate adja a „folyékony" színtelítést a réteg alatt.
       Finom fényél felül + halvány árnyék-él alul + lágy mélység. A backdrop-filter
       SOSEM animált (drága) — csak a transform és az árnyék. */
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 var(--glass-edge),
                inset 0 -1px 0 var(--glass-edge-low),
                var(--glass-depth-1);
    transition: background-color var(--f-dur) var(--f-ease),
                border-color var(--f-dur) var(--f-ease),
                color var(--f-dur) var(--f-ease),
                box-shadow var(--f-dur) var(--f-ease),
                transform var(--f-dur) var(--f-ease);
}

/* --- Elsődleges ---------------------------------------------------------- */
.btn-f,
input[type="submit"] {
    background-color: var(--glass-primary);
    color: var(--f-white);
    border-color: rgba(255, 255, 255, .22);
}
.btn-f:hover,
input[type="submit"]:hover {
    background-color: var(--glass-primary-hover);
    color: var(--f-white);
    text-decoration: none;
}

/* --- Másodlagos (a régi „outline") -------------------------------------- */
.btn-f-outline {
    background-color: var(--glass-secondary);
    color: var(--f-ink);
    /* A körvonal a kezelőszervet AZONOSÍTJA: .55 alfa = 4,05:1 a lapháttéren. */
    border-color: var(--glass-line);
}
.btn-f-outline:hover {
    background-color: var(--glass-secondary-hover);
    color: var(--f-ink);
    text-decoration: none;
}

/* --- Szellem (új változat: eszköztárak, másodrangú műveletek) ------------ */
.btn-f-ghost {
    background-color: var(--glass-ghost);
    color: var(--f-ink);
    border-color: var(--glass-line-soft);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}
.btn-f-ghost:hover {
    background-color: var(--glass-ghost-hover);
    border-color: var(--glass-line);
    color: var(--f-ink);
    text-decoration: none;
}

/* --- Romboló ------------------------------------------------------------- */
.btn-f-danger {
    background-color: var(--glass-danger);
    color: var(--f-white);
    border-color: rgba(255, 255, 255, .20);
}
.btn-f-danger:hover {
    background-color: var(--glass-danger-hover);
    color: var(--f-white);
    text-decoration: none;
}

/* --- Állapotok (minden változatra) -------------------------------------- */
.btn-f:hover,
.btn-f-outline:hover,
.btn-f-ghost:hover,
.btn-f-danger:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-depth-2);
}

.btn-f:active,
.btn-f-outline:active,
.btn-f-ghost:active,
.btn-f-danger:active,
input[type="submit"]:active {
    transform: translateY(0) scale(.975);
    box-shadow: inset 0 1px 3px rgba(16, 16, 16, .22);
}

/* A fókuszgyűrű a base.css-ből jön (két gyűrű: fehér távtartó + ink körvonal).
   Itt csak annyi a dolgunk, hogy a gomb saját mélység-árnyéka ne írja felül. */
.btn-f:focus-visible,
.btn-f-outline:focus-visible,
.btn-f-ghost:focus-visible,
.btn-f-danger:focus-visible,
input[type="submit"]:focus-visible {
    box-shadow: 0 0 0 2px var(--f-white), var(--glass-depth-1);
}

.btn-f:disabled,
.btn-f-outline:disabled,
.btn-f-ghost:disabled,
.btn-f-danger:disabled,
input[type="submit"]:disabled,
.btn-f[aria-disabled="true"] {
    /* A LETILTOTT gomb SZÁNDÉKOSAN nem üveg: átlátszatlan töltet, homály nélkül.
       Mért indok — áttetsző tölteten (.85) a --f-grey-2 felirat a SÖTÉT felületek
       fölött csak 4,10:1-et adott. Átlátszatlanul mindenhol 5,64:1. Egy letiltott
       kezelőszerv amúgy sem emelkedik ki: mélységet és fényélt sem kap. */
    background-color: var(--f-light);
    color: var(--f-grey-2);
    border-color: var(--glass-line-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* --- Sötét felületen (admin fejléc és lábléc, sötét blokk) --------------
   CSAK a valóban sötét felületekre! A PUBLIKUS fejléc és lábléc világos
   (layout.css), ott a fehér felirat olvashatatlan lenne. */
.f-admin .f-header .btn-f-ghost,
.f-admin .f-footer .btn-f-ghost,
.u-dark .btn-f-ghost {
    background-color: rgba(255, 255, 255, .10);
    color: var(--f-white);
    border-color: rgba(255, 255, 255, .34);
}

/* --- Méretek ------------------------------------------------------------- */
.btn-f--full { width: 100%; }

/* Kompakt gomb a SŰRŰ admin-táblázatokhoz. A LÁTVÁNY kicsi marad (a táblázat nem
   hízik ki), az ÉRINTÉSI CÉL viszont 44 px: a ::after egy láthatatlan, a gombra
   középre húzott takaró. Így a WCAG 2.5.5 és a „dense tables stay dense"
   megrendelői kérés egyszerre teljesül. */
.btn-f--small {
    min-height: 34px;
    padding: 0.35em 0.95em;
    font-size: 0.85rem;
}
.btn-f--small::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

@media (max-width: 820px) {
    /* Mobilon nincs sűrű táblázat: a kompakt gomb is valódi 44 px magas lesz. */
    .btn-f--small { min-height: 44px; }
    .btn-f--small::after { display: none; }
}