@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,
body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* A függőleges görgetősáv helye MINDIG le van foglalva, akkor is, ha az adott lap elfér.
   Enélkül a rövid és a hosszú lapok tartalom-szélessége a görgetősáv szélességével eltér, és mivel a
   rögzített fejléc (`position: fixed; width: 100%`) UGYANEHHEZ a szélességhez igazodik, navigáláskor
   a lap jobb széle a menüsávval EGYÜTT ugrik odébb.

   CSAK egérrel vezérelt (pointer: fine) felületen. Érintőn a helyfoglalás nem old meg semmit — ott a
   görgetősáv rálógó (overlay), tehát eleve nem tol el semmit —, viszont egy állandó, üres sávot vágna
   le a képernyő jobb széléből, ahol a hely amúgy is a legszűkösebb. */
@media (pointer: fine) {
    html {
        scrollbar-gutter: stable;
    }
}

/* ===================== AUTH PAGES ===================== */

.auth-page {
    /* A MudMainContent már fenntart felül a fix fejlécnyi helyet; a teljes 100vh ezzel duplázna,
       túllógna és lejjebb tolná a középre igazított kártyát. Ezért a fejléc magasságát levonjuk —
       a --msm-header-height az appbart ÉS a második nav-sávot is tartalmazza. */
    min-height: calc(100vh - var(--msm-header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 1rem;
}

.auth-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.auth-card--wide {
    max-width: 520px;
}

/* ===================== ADMIN (/admin) ===================== */
/* Széles admin-táblázat kis kijelzőn: a sáv görgessen vízszintesen, ne az egész oldal feszüljön
   szét. (A MudBlazor .mud-table-container csak overflow-y-t ad, overflow-x-et nem.) */
.admin-table-scroll {
    overflow-x: auto;
}

/* ===================== LISTA-SZŰRŐK ===================== */
/* A lista-panelek fejlécében álló szűrő-mezők (keresés + legördülők).

   A MudBlazor input-vezérlője `flex: 1 1 auto`, a legördülője pedig egy MÁSIK belső elemen visz
   `flex-grow: 1`-et. Egy flex-sorban ebből az lesz, hogy minden mező nyúlik, de nem egyformán, és
   tördeléskor az átcsúszott mező egyedül maradva az egész sort elfoglalja. A `width` és a
   `min-width` nem segít: a flex-grow felülírja őket a végleges méret számításánál.

   Ezért a mezők SAJÁT div-be (.filter-field) vannak csomagolva, és a flex-szabály azon ül — a
   burkolat biztosan a flex-elem, tehát a viselkedés független attól, a MudBlazor melyik belső
   elemére kerülne az osztály.

   A mezők NŐNEK, hogy kitöltsék a sort, és egyenlően osztoznak a helyen: a 170 px a kiindulási
   méret, nem a végleges. Ami nem szűrő-mező (kapcsoló, gomb), az megtartja a természetes méretét.
   Keskeny kijelzőn mindegyik teljes szélességű: ott a mezők egymás alá kerülnek. */
.filter-row > * {
    flex: 0 0 auto;
}

.filter-row > .filter-field {
    flex: 1 1 170px;
    min-width: 0;
}

@media (max-width: 599.98px) {
    .filter-row > .filter-field {
        flex-basis: 100%;
    }
}

/* A lenyitott leltár-sor adatmezői. Közös minimum-szélesség, hogy két rövid, azonos szövegű érték
   („Megnyitás" a fotón és a bizonylaton) ne olvadjon egyetlen sorrá. */
.asset-detail-field {
    min-width: 9rem;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-logo {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    color: #D84A37;
    letter-spacing: -0.05em;
    line-height: 1;
    padding: 0.4rem 1rem;
    border: 3px solid #D84A37;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.auth-tagline {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0;
    letter-spacing: 0.02em;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 1.5rem 0;
}

.auth-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f0f0f0;
}

.auth-submit-btn {
    margin-top: 0.25rem;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    height: 48px !important;
}

/* A login űrlap natív HTML input-okat használ (statikus SSR, form-post),
   ezért saját mezőstílust kap a MudBlazor outlined mezők helyett. */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.auth-field__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    letter-spacing: 0.02em;
}

.auth-field__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1a1a2e;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field__input:hover {
    border-color: #adb5bd;
}

.auth-field__input:focus {
    outline: none;
    border-color: #D84A37;
    box-shadow: 0 0 0 3px rgba(216, 74, 55, 0.15);
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #495057;
    cursor: pointer;
    user-select: none;
}

.auth-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: #D84A37;
    cursor: pointer;
}

.auth-consent {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    background: #faf6f5;
    border: 1px solid #f0d9d4;
    border-radius: 8px;
}

.auth-consent__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #343a40;
    cursor: pointer;
}

.auth-consent__row input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    accent-color: #D84A37;
    cursor: pointer;
    flex-shrink: 0;
}

.auth-consent__hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6c757d;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.auth-footer p {
    margin: 0;
}



/* ===================== ÚJRACSATLAKOZÁS ===================== */
/* A Blazor a #components-reconnect-modal osztályait váltogatja — a megjelenés a miénk. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(26, 26, 46, 0.45);
    backdrop-filter: blur(6px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal.components-reconnect-show .failed,
#components-reconnect-modal.components-reconnect-show .rejected,
#components-reconnect-modal.components-reconnect-failed .show,
#components-reconnect-modal.components-reconnect-failed .rejected,
#components-reconnect-modal.components-reconnect-rejected .show,
#components-reconnect-modal.components-reconnect-rejected .failed {
    display: none;
}

.reconnect-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    padding: 2rem 2.25rem;
    text-align: center;
    min-width: 280px;
    max-width: 90vw;
}

.reconnect-card__logo {
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--msm-accent);
    letter-spacing: -0.05em;
    line-height: 1;
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--msm-accent);
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

.reconnect-card__text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    margin: 0;
}

.reconnect-card__spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 1rem;
    border: 3px solid rgba(216, 74, 55, 0.2);
    border-top-color: var(--msm-accent);
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
}

@keyframes reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.reconnect-card__btn {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.6rem 1.5rem;
    background: var(--msm-accent);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: filter 0.15s ease;
}

.reconnect-card__btn:hover {
    filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .reconnect-card__spinner {
        animation-duration: 3s;
    }
}

:root {
    --msm-accent: #D84A37;

    /* A FEJLÉC KÉT SORA. A második nav-szint az appbaron BELÜL él, nem alatta külön sávként — így
       nincs mit egymáshoz igazítani, és nem keletkezhet rés a kettő között.

       (Korábban külön rögzített sáv volt, `top: var(--mud-appbar-height)` = 64px-nél. A MudBlazor
       viszont a saját toolbarját calc(--mud-appbar-height − /4) = 48px-re húzza fekvő tájolásban,
       vagyis minden asztali monitoron — a 16px különbségen átlátszott a lap.)

       Innen számol MINDEN: a toolbar magassága, a tartalom felső paddingja, a két teljes-magasságú
       lap (.auth-page, .public-page) 100vh-kivonása és a mobil panel teteje. Egy forrás, mert ha
       ezek szétcsúsznak, a rögzített fejléc ráfut a tartalomra. */
    /* AZ ELSŐ SOR EGY VONAL: a logó, a klub-váltó, a menüelemek és a záró-csoport MIND ebben ül.
       A második sor ezt KIEGÉSZÍTI: közvetlenül alatta, a menü-oszlopba húzva, kisebb betűvel.

       A `--msm-navbar-margin` a fejléc tetején és alján EGYFORMÁN ad levegőt — MARGÓval, tehát a
       toolbar dobozán KÍVÜL: a toolbar magassága pontosan a két sor, az appbar pedig a margóval
       együtt nő. (A .mud-appbar flex-konténer, ezért a margók nem esnek össze.) */
    --msm-navbar-row1: 40px;
    --msm-navbar-row2: 22px;
    --msm-navbar-gap: 0px;
    --msm-navbar-margin: 10px;

    /* A toolbar saját magassága: csak a sorok. */
    --msm-navbar-rows: calc(var(--msm-navbar-row1) + var(--msm-navbar-gap) + var(--msm-navbar-row2));

    /* A TELJES fejléc, amivel a tartalom paddingja és a 100vh-kivonások számolnak. */
    --msm-header-height: calc(2 * var(--msm-navbar-margin) + var(--msm-navbar-rows));
}

/* Mobilon a második szint a hamburger-panelbe költözik → nincs második sor; a fejléc az egyetlen
   sorra + a margókra fogy (10 + 40 + 10 = 60 px). */
@media (max-width: 960px) {
    :root {
        --msm-navbar-row2: 0px;
        --msm-navbar-gap: 0px;
    }
}

/* A MudMainContent beépített padding-topja a MudBlazor saját appbar-magasságát tartja fenn; nekünk a
   kétsoros fejléc kell. NEM MudBlazor padding-utilityvel (pt-*): azok !importanttal ütnék ki ezt. */
.mud-main-content {
    padding-top: var(--msm-header-height);
}

/* A dátumválasztó felugró naptára a MEZŐ szélességére szűkül, ha a mezőre max-width kerül (márpedig
   egy szűrő- vagy űrlapsorban kerül) — a .mud-picker-popover-paper overflow-x: hidden szabálya pedig
   némán levágja a naptár jobb szélét: a hét utolsó napjai egyszerűen eltűnnek. A naptár tartalma fix
   310 pixel (.mud-picker-content min-width), ezért ugyanezt a papírra is ki kell kényszeríteni. A
   min-width erősebb a max-widthnél ÉS a widthnél is, tehát ez a mező szélességétől függetlenül
   visszaadja a teljes naptárat. */
.mud-picker-popover-paper {
    min-width: 312px;
}


/* ===================== APP FEJLÉC ===================== */

/* A fejléc EGY elem, két sorral. Rács kell hozzá, nem térköz: a második sor első elemének pontosan a
   fősáv ELSŐ MENÜELEMÉVEL kell egy vonalban lennie — nem a klub-váltóval —, a logó és a klub-váltó
   szélessége viszont futásidőben változik, kijelentkezve pedig a klub-váltó nincs is ott. Az
   oszlop-azonosság ezt szerkezetileg adja meg, képlet nélkül.

   Az elhelyezés EXPLICIT, nem automatikus: kijelentkezve az AuthorizeView semmit sem renderel a
   klub-váltó helyén, és automatikus kitöltésnél a nav-csoport a 2. oszlopba csúszna — a második sor
   pedig elcsúszna tőle. Így a 2. oszlop egyszerűen nulla széles marad.

   AZ ELSŐ SOR EGY VONAL: a logó, a klub-váltó, a menüelemek és a záró-csoport (nyelvválasztó +
   be-/kijelentkezés) MIND az 1. sorban ül, ugyanúgy, mint az egysoros fejlécben. A második sort
   KIZÁRÓLAG a szekciók foglalják el, a menü-oszlopba húzva — a főmenü és az almenü így egy
   egységként olvasódik a középső oszlopban, a többi oszlop pedig egysoros marad.

   A magasság-szabály a MudBlazor sajátját váltja ki (.mud-appbar .mud-toolbar-appbar, ami egy
   orientation-media queryben ül). Azért nyer, mert az app.css később töltődik ÉS eggyel
   specifikusabb — szándékosan nem !importanttal. A `height` border-box, tehát a padding BELEFÉR,
   és pontosan azt adja ki, amit a --msm-header-height számol. */
.mud-appbar .mud-toolbar.mud-toolbar-appbar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: var(--msm-navbar-row1) var(--msm-navbar-row2);
    row-gap: var(--msm-navbar-gap);
    align-items: center;
    height: var(--msm-navbar-rows);
    margin-top: var(--msm-navbar-margin);
    margin-bottom: var(--msm-navbar-margin);
}

.app-brand {
    grid-column: 1;
    grid-row: 1;
    /* az első sor EGY vonal: a logó is abban ül, a menüelemekkel együtt */
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: inherit;
    text-decoration: none;
    margin-right: 1.5rem;
}

/* Klub-váltó: a márkanév után, a nézetváltó fülek előtt (wireframe A2). Saját rács-oszlop, mert a
   második sor NEM alá, hanem a nav-oszlop alá igazodik. Az ELSŐ sorban ül, egy vonalban a logóval
   és a menüelemekkel. */
.org-switcher {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 1.25rem;
    flex: 0 0 auto;
}

/* A klub-váltó szándékosan ELTÉR a nézet-füllektől: finom keretes „kontextus-chip", hogy
   ránézésre látsszon — ez a KONTEXTUS (melyik klub), nem egy nézet. A max-width + ellipszis
   marad, mert a szervezetnevek hosszabbak lehetnek, mint a rövid szakágnevek. */
.org-switcher__select {
    appearance: none;
    -webkit-appearance: none;
    /* A doboz a KIVÁLASZTOTT szöveghez méreteződik, nem a legszélesebb opcióhoz (pl. a hosszú
       „Új szervezet" tételhez). Modern böngészőkben hat; a nem támogatókban a régi, opció-szélességű
       viselkedésre esik vissza. A max-width felső korlát a nagyon hosszú neveknek. */
    field-sizing: content;
    max-width: 240px;
    padding: 0.3rem 1.6rem 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 1px solid;
    border-color: rgba(128, 128, 128, 0.4);
    border-color: color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 8px;
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.org-switcher__select:hover {
    border-color: var(--msm-accent);
}

.org-switcher__select:focus-visible {
    outline: none;
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px rgba(216, 74, 55, 0.15);
}

/* A legördülő elemeit az OS rajzolja — fix színek kellenek, nem currentColor. */
.org-switcher__select option {
    color: #1a1a2e;
    background: #ffffff;
}

.org-switcher::after {
    content: "▾";
    position: absolute;
    right: 0.6rem;
    font-size: 0.75rem;
    opacity: 0.7;
    pointer-events: none;
}

/* Klub-választó kártyák (wireframe A1) */
.club-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.club-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    width: 100%;
    padding: 1rem;
    font: inherit;
    text-align: left;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.club-card:hover {
    border-color: var(--msm-accent);
    box-shadow: 0 4px 16px rgba(216, 74, 55, 0.12);
    transform: translateY(-1px);
}

.club-card:focus-visible {
    outline: none;
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px rgba(216, 74, 55, 0.15);
}

.club-card__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.club-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.club-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.club-role-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: #565d68;
    background: #f1f3f5;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.club-list__note {
    font-size: 0.8rem;
    color: #868e96;
    text-align: center;
    margin: 1.25rem 0 0;
}

/* A menüelemek sora. Rács-elemként az 1. sorban ül a nav-oszlopban — a második szint UGYANEBBEN az
   oszlopban, a 2. sorban, ezért esik egybe a két sor első elemének bal éle. */
.app-tabs {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.app-tabs__item {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.72;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

a.app-tabs__item:hover {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.app-tabs__item--active {
    opacity: 1;
    color: var(--msm-accent);
    background-color: rgba(216, 74, 55, 0.10);
}

/* Szakág-fül több vezetett szakág esetén: legördülő (wireframe A2). */
.app-tabs__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
}

/* A „Szakág:" felirat csak aktív módban jelenik meg (külön elem a select előtt); az opciókban
   NINCS prefix, ezért a nyitott lista tiszta. A bal padding a többi fül szövegkezdéséhez igazít. */
.app-tabs__select-label {
    padding-left: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--msm-accent);
    white-space: nowrap;
    pointer-events: none;
}

.app-tabs__select select {
    appearance: none;
    -webkit-appearance: none;
    /* A kiválasztott szöveghez méreteződik, nem a leghosszabb szakágnévhez (lásd .org-switcher__select). */
    field-sizing: content;
    padding: 0.35rem 1.5rem 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 8px;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.app-tabs__select select:hover {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.app-tabs__select select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(216, 74, 55, 0.15);
}

.app-tabs__select select option {
    color: #1a1a2e;
    background: #ffffff;
}

.app-tabs__select::after {
    content: "▾";
    position: absolute;
    right: 0.5rem;
    font-size: 0.7rem;
    opacity: 0.7;
    pointer-events: none;
}

/* Aktív háttér a WRAPPEREN, hogy a felirat + a select együtt („Szakág: Judo") legyen kiemelve. */
.app-tabs__select--active {
    background-color: rgba(216, 74, 55, 0.10);
}

.app-tabs__select--active select {
    /* A felirat adja a bal térközt, a select balról szűk, hogy „Szakág: Judo" tömör legyen. */
    padding-left: 0.25rem;
    opacity: 1;
    color: var(--msm-accent);
}

.app-tabs__select--active::after {
    color: var(--msm-accent);
    opacity: 1;
}

/* ── MÁSODIK NAV-SZINT (.app-subnav) ────────────────────────────────────────
   Az AKTUÁLIS terület szekciói. Két helyen jelenik meg, ugyanabból a komponensből — asztali gépen az
   appbar MÁSODIK SORAKÉNT, mobilon a hamburger-panel fájában.

   MINDIG ott van, akkor is, ha üres (landing, auth, klub-választó, onboarding, hibalap). Ez tudatos:
   így a fejléc magassága konstans, és a tartalom paddingja egyetlen, feltétel nélküli érték lehet
   (--msm-header-height). Egy „van-e almenü" feltétel két fejléc-magasságot jelentene, és abból lesz
   az a hiba, hogy a rögzített fejléc idővel ráfut a szövegre.

   Ezért nincs saját kerete, doboza vagy háttere: nem sáv az appbar alatt, hanem a fejléc egy sora —
   az üres eset egyszerűen egy magasabb fejléc, nem „üres menü". */
.app-subnav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* A fejléc második sora (asztali). Semmilyen saját dísz: ugyanaz a felület, mint a fősáv, csak
   alacsonyabb és kisebb betűs.

   A NOWRAP + vízszintes görgetés lényegi: ha a sor törne, egy harmadik sort nyitna, és a fejléc
   magassága lapról lapra változna — pont az, amit a konstans magassággal elkerülünk. A /d/{szakág}
   hét, a /disciplines kilenc szekcióig nő, tehát ez nem elméleti. */
.app-subnav--row {
    grid-column: 3;
    grid-row: 2;
    align-self: stretch;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* A kisebb betű a második sor jele. Az OLDALpadding viszont AZONOS a fősávéval (0.75rem), különben a
   szöveg bal éle elcsúszna a fősáv első menüelemétől — az igazítás ezen áll. */
.app-subnav--row .app-subnav__item {
    font-size: 0.75rem;
    padding: 0.15rem 0.75rem;
}

/* A kijelentkezés POST-űrlapja: a form maga ne foglaljon dobozt, a gomb üljön közvetlenül a sorban. */
.app-subnav__form {
    display: contents;
}

/* A gomb-alak nullázása, hogy a POST-elem vizuálisan megkülönböztethetetlen legyen a linkektől.
   A `text-align: inherit` nem kozmetika: a gomb alapértelmezése `center`, a linkeké `start`. A fejléc
   sorában ez nem látszik (a gomb a tartalmára szűkül), a mobil fában viszont a lista `stretch`-eli az
   elemeket — ott a Kijelentkezés középre ült a bal széles társai közt. */
button.app-subnav__item {
    background: none;
    border: none;
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
}

.app-subnav__item {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.72;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

a.app-subnav__item:hover {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.app-subnav__item--active {
    opacity: 1;
    color: var(--msm-accent);
    background-color: rgba(216, 74, 55, 0.10);
}

/* Még tartalom nélküli szekció (tagdíj, jelenlét, bírói fülek, publikus placeholderek): halványabb,
   de KATTINTHATÓ — a mögötte lévő lap megmondja, mi fog ide kerülni. */
.app-subnav__item--soon {
    opacity: 0.45;
}

/* ── Reszponzív fejléc ──────────────────────────────────────────────────────
   Desktop: minden egy sorban — a nézetváltók balra, a záró-csoport (nyelvválasztó +
   kijelentkezés) jobbra tolva (a régi MudSpacer helyett). Mobil: a jobb szélső hamburger
   nyitja a sáv alatti, függőleges panelt; a logó + klub-váltó a sávban marad. */
.app-hamburger {
    display: none;
    /* desktopon rejtve */
}

/* A második szint FÁJA csak a mobil hamburger-panelben él; asztali gépen a fejléc második sora
   (.app-subnav--row) viszi ugyanezt. Ezért a fa és a lapos .app-tabs sosem látszik egyszerre —
   mobilon a fa VÁLTJA a lapos listát, hogy a területek ne szerepeljenek kétszer. */
.app-nav-tree {
    display: none;
}

/* A nav-csoport asztali gépen NEM saját rács-elem: a `display: contents` feloldja, így a gyerekei
   (a menüelemek és a záró-csoport) KÜLÖN oszlopba kerülhetnek — a menüsor az 1. sorba (mert alá
   igazodik a második szint), a záró-csoport viszont mindkét sort átéri és középen ül.
   Egyetlen elemként ez nem lenne megoldható, márkupot viszont nem kell hozzá bontani.
   Mobilon a lenti media query visszaveszi (fixed panel), ezért az itteni flex-tulajdonságok ottani
   használatra maradnak. */
.app-nav-group {
    display: contents;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

/* Nyelvválasztó + be-/kijelentkezés: a jobb szélső oszlopban, de UGYANABBAN az első sorban, mint a
   logó és a menü — az első sor egy vonal. */
.app-nav-group__end {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 960px) {
    .app-hamburger {
        /* A rács jobb szélső oszlopa, az első sorban: MSM · klub-váltó · ☰
           (a margin-left:auto flexben működött, rács-elemnél a justify-self a megfelelője). */
        display: inline-flex;
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
    }

    /* A nézetváltók + nyelvválasztó + kijelentkezés a hamburger mögé kerül: a sáv alatt megnyíló,
       teljes szélességű, KÖZÉPRE zárt, függőleges panel. A sávban csak a logó + klub-váltó marad.
       A `top` a FEJLÉC magasságából jön (mobilon = az egyetlen sor), nem a MudBlazor saját
       appbar-változójából — az korábban 16px-cel a sáv alá lökte a panelt. */
    .app-nav-group {
        display: none;
        position: fixed;
        top: var(--msm-header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 0.75rem;
        background: var(--mud-palette-appbar-background);
        color: var(--mud-palette-appbar-text);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        z-index: 1200;
    }

    .app-nav-group--open {
        display: flex;
    }

    .app-nav-group__end {
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* A fejléc második sora mobilon nincs — a második szint a panel fájába költözik. A --msm-navbar-row2
       is 0px, tehát a rács-sor sem foglal helyet. */
    .app-subnav--row {
        display: none;
    }

    /* A panel a fával magasabb lehet a képernyőnél: görgethető legyen, ne lógjon ki. */
    .app-nav-group {
        max-height: calc(100vh - var(--msm-header-height));
        overflow-y: auto;
    }

    /* A lapos terület-lista helyét a FA veszi át: minden terület a saját allépcsőivel, külön-külön
       nyithatóan. A kettő egyszerre duplázná a területeket. */
    .app-tabs {
        display: none;
    }

    .app-nav-tree {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        width: 100%;
        max-width: 320px;
    }

    /* A csoport-fejléc: a felirat LINK (a terület gyökere), a nyíl a nyitásé. A natív marker
       elrejtve, mert saját nyilat rajzolunk. */
    .app-nav-tree__summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .app-nav-tree__summary::-webkit-details-marker {
        display: none;
    }

    .app-nav-tree__summary::after {
        content: "▾";
        font-size: 0.7rem;
        opacity: 0.7;
        padding-right: 0.75rem;
    }

    .app-nav-tree__group[open]>.app-nav-tree__summary::after {
        content: "▴";
        opacity: 1;
    }

    .app-nav-tree__link {
        display: block;
        padding: 0.4rem 0.75rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: inherit;
        text-decoration: none;
        white-space: nowrap;
        opacity: 0.85;
    }

    .app-nav-tree__link--active {
        opacity: 1;
        color: var(--msm-accent);
    }

    /* A csoport allépcsői: függőlegesen, behúzva — ettől olvasható a hierarchia. */
    .app-nav-tree .app-subnav {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0.15rem 0 0.35rem 1.25rem;
    }

    .app-nav-tree .app-subnav__item {
        font-size: 0.85rem;
    }

    /* A logó + klub-váltó ne vigyen el túl sok helyet a szűk sávban. */
    .app-brand {
        margin-right: 0.75rem;
    }

    .org-switcher {
        margin-right: 0.5rem;
    }

    .org-switcher__select {
        max-width: 150px;
    }
}

/* ===================== LANDING PAGE ===================== */











/* Nyelvváltó (fejléc + landing): szegmentált kapcsoló, nem legördülő.
   A színek currentColor-ból származnak, így világos és sötét sávon is helyesek —
   a color-mix előtti sor a régebbi böngészők tartaléka. */
.culture-switch {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    border: 1px solid;
    border-color: rgba(128, 128, 128, 0.45);
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 999px;
    overflow: hidden;
    margin-right: 0.75rem;
}

.culture-switch__link {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.62rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: inherit;
    text-decoration: none;
    opacity: 0.62;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.culture-switch__link+.culture-switch__link {
    border-left: 1px solid;
    border-left-color: rgba(128, 128, 128, 0.35);
    border-left-color: color-mix(in srgb, currentColor 22%, transparent);
}

.culture-switch__link:hover {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.culture-switch__link--active {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.18);
    background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.landing-hero {
    display: flex;
    padding: 5rem 2rem 3rem;
    max-width: 1000px;
    margin: 0 auto;
    gap: 4rem;
    border-bottom: 1.5px solid #c9c5bd;
}

.landing-hero__content {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.landing-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #1a1a2e;
    margin: 0 0 1rem 0;
}

.landing-hero__sub {
    font-size: 1.1rem;
    color: #6c757d;
    margin: 0 0 2rem 0;
}

.landing-search-field {
    max-width: 400px;
    margin-bottom: 1.5rem;
}

.landing-hero__cta {
    align-self: flex-start;
    font-weight: 600 !important;
}

.landing-hero__visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}

.landing-hero__stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.landing-stat {
    display: flex;
    flex-direction: column;
}

.landing-stat__num {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2b2b2b;
}

.landing-stat__label {
    font-size: 0.8rem;
    color: #6c757d;
}

.landing-hero__illustration {
    height: 180px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c9c5bd;
}

.landing-events {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.landing-events__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

.landing-events__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.landing-event-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f8f9fa;
    gap: 1rem;
}

.landing-event-row__date {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    width: 60px;
}

.landing-event-row__name {
    flex: 1;
    font-weight: 500;
    color: #1a1a2e;
    font-size: 0.95rem;
}


/* ===================== PUBLIC BROWSER (/clubs, /clubs/{id}, /disciplines) ===================== */
/* Ugyanaz az esztétika, mint az admin/auth kártyáké (gradiens háttér + fehér, széles, felülre
   igazított kártya), a fix MudAppBar alól kitolva. Statikus SSR-en renderel, ezért a szűrő natív
   HTML-form (nincs MudBlazor interaktivitás). */
.public-page {
    /* A MudMainContent már fenntartja felül a fejléc magasságát; ezért NEM kompenzálunk újra a
       padding-topban (az duplázna), és a 100vh-ból is levonjuk a fejlécet (különben túllóg). */
    min-height: calc(100vh - var(--msm-header-height));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 1rem 3rem;
}

.public-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 2rem;
    width: 100%;
    max-width: 1100px;
}

.public-head {
    margin-bottom: 1.5rem;
}

.public-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.35rem;
}

.public-subtitle {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

/* --- Szűrő-sor (natív GET-form) --- */
.public-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

.public-filter__search,
.public-filter__select {
    font: inherit;
    padding: 0.6rem 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 10px;
    background: #fff;
    color: #1a1a2e;
}

.public-filter__search {
    flex: 1 1 240px;
    min-width: 200px;
}

.public-filter__search:focus,
.public-filter__select:focus {
    outline: none;
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px rgba(216, 74, 55, 0.15);
}

.public-filter__btn {
    font: inherit;
    font-weight: 600;
    padding: 0.6rem 1.3rem;
    border: none;
    border-radius: 10px;
    background: var(--msm-accent);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.public-filter__btn:hover {
    filter: brightness(0.94);
}

.public-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #868e96;
    background: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 12px;
}

/* --- Klub-rács (lista) --- */
.club-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.club-tile {
    display: flex;
    gap: 0.9rem;
    padding: 1rem;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.club-tile:hover {
    border-color: var(--msm-accent);
    box-shadow: 0 4px 16px rgba(216, 74, 55, 0.12);
    transform: translateY(-1px);
}

.club-tile__logo {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f8f9fa;
    overflow: hidden;
}

.club-tile__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.club-tile__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.club-tile__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: #6c757d;
}

.club-tile__dot {
    color: #ced4da;
}

.club-tile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.club-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: #565d68;
    background: #f1f3f5;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    text-decoration: none;
}

.club-chip--more {
    color: #868e96;
    background: transparent;
}

.club-chip--link:hover {
    background: rgba(216, 74, 55, 0.1);
    color: var(--msm-accent);
}

/* --- Klub-adatlap --- */
.public-back {
    display: inline-block;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
}

.public-back:hover {
    color: var(--msm-accent);
}

.club-detail__head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.club-detail__logo {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f8f9fa;
    overflow: hidden;
}

.club-detail__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-detail__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.3rem;
}

.club-detail__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.club-detail__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #343a40;
    margin: 0 0 1.5rem;
    white-space: pre-line;
}

.club-detail__section {
    margin-top: 1.5rem;
}

/* Egy szakosztály bemutatkozója a klub adatlapján (a szakág-chipek alatt). */
.club-detail__discipline {
    margin-top: 1.25rem;
}

.club-detail__discipline-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.35rem;
}

.public-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
}

/* --- Publikus versenyző-adatlap (#32) --- */

/* A klub-logó szögletes, a SZEMÉLY képe kerek — a két lap fejét ez különbözteti meg egymástól.
   A méret és a háttér a .club-detail__logo-t követi, hogy a két adatlap egy rendszernek látsszon. */
.athlete-detail__photo {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f9fa;
    overflow: hidden;
}

.athlete-detail__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.athlete-detail__monogram {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    opacity: 0.45;
}

/* A versenyző-csempe feje a klub-csempéét követi (56 px), csak kerek — ugyanaz a megkülönböztetés,
   mint az adatlapon: a klub szögletes, a személy kerek. */
.athlete-tile__photo {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f9fa;
    overflow: hidden;
}

.athlete-tile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.athlete-tile__photo .athlete-detail__monogram {
    font-size: 1.15rem;
}

/* Eredmény-tábla a publikus lapon. NEM MudTable: ezek a lapok statikus SSR-ben futnak, a Mud-téma
   nélkül — ugyanaz az indok, amiért a klub-csempék is sima HTML+CSS-ből épülnek. Vízszintesen a
   .admin-table-scroll görgeti, ha keskeny a képernyő. */
.public-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.public-table th,
.public-table td {
    text-align: left;
    padding: 0.45rem 0.75rem 0.45rem 0;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}

.public-table th {
    font-weight: 600;
    color: #6c757d;
}

/* --- Szakág-katalógus --- */
.disc-group {
    margin-bottom: 1.75rem;
}

.disc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

.disc-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.disc-tile:hover {
    border-color: var(--msm-accent);
    box-shadow: 0 3px 12px rgba(216, 74, 55, 0.1);
}

.disc-tile__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
}

.disc-tile__count {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    background: #f1f3f5;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

/* A hitelesítő pipa: az ikon a klubnév alapvonalához igazítva. */
.verified-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (max-width: 600px) {
    .public-card {
        padding: 1.25rem;
    }

    .club-detail__head {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* A sztornózott sor HALVÁNY, de nem eltüntetett: a tétel megtörtént, a versenyző kapott róla
   papírt — az elrejtése épp azt a magyarázatot venné el, amiért a sztornó a törlés helyett van.
   Áthúzás nincs: az összeg nem „nem igaz", hanem „már nem esedékes". */
.fee-voided-row > td {
    opacity: 0.55;
}