/* Tailwind v4 rétegsorrend rögzítése: az utility-k mindig felülírják a komponens-réteget. */
@layer theme, base, components, utilities;

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.open .modal {
    transform: translate(0, 0);
}

/* UI-07: a fő tartalom alapstílusai `@layer components` alatt, `:where()`-rel nulla
   specificitással. A Tailwind utility-k (p-0, mb-6, bg-white, w-64 ...) így mindig felülírják
   őket; a szabály csak tartalékként (fallback) adja a megjelenést, ahol nincs utility. */
@layer components {
    :where(main#main-content) {
        margin-left: auto;
        margin-right: auto;
    }

    /* A modal-overlay / dialog és a flash-konténer közvetlen gyermekek NEM kapnak panel-stílust:
       különben az overlay teljes képernyős tömör panel lenne. */
    :where(main#main-content) > :where(*:not(.modal-overlay):not(.modal-backdrop):not([role="dialog"]):not(.mz-alerts)) {
        background-color: var(--meduza-color-surface-raised);
        border-radius: 0.75rem;
        border: 1px solid var(--meduza-color-border-subtle);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    /* UI-17: kis képernyőn (sm alatt) a panelek belső és külső margója kisebb, hogy a tartalom
       ne szoruljon össze; ugyanaz a nulla specificitású szelektor, a későbbi szabály nyer. */
    @media (max-width: 639.98px) {
        :where(main#main-content) > :where(*:not(.modal-overlay):not(.modal-backdrop):not([role="dialog"]):not(.mz-alerts)) {
            padding: 1rem;
            margin-bottom: 1rem;
        }
    }
}

/* A fő tartalom panelei tokeneket használnak, ezért a sötét téma (explicit vagy
   rendszerszintű) külön, magasabb specificitású felülírás nélkül is helyes. */

/* Tipográfiai alapok: `components` rétegben, nulla specificitással, így a
   Tailwind utility-k (text-*, mb-*, font-*) felülírhatják. A színek a tokenekből
   jönnek, ezért sötét témában (rendszerszintű vagy explicit) is olvashatók. */
@layer components {
    :where(main#main-content) h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--meduza-color-text);
        margin-bottom: 1.5rem;
    }

    :where(main#main-content) h2 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--meduza-color-text);
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    :where(main#main-content) p {
        font-size: 0.875rem;
        color: var(--meduza-color-text-muted);
        margin-bottom: 1rem;
        line-height: 1.25rem;
    }

    :where(main#main-content) a {
        color: var(--meduza-color-brand);
        text-decoration: none;
        font-weight: 500;
    }

    :where(main#main-content) a:hover {
        text-decoration: underline;
    }
}

/* A schedule CRUD kártyái (UI-24): `!important` nélkül, tokenekből. A rétegen kívüli szabály a
   (rétegezett) Tailwind utility-ket specificitástól függetlenül legyőzi, ezért nem kell `!important`,
   és mindkét témában (explicit vagy rendszerszintű) ugyanaz a token-érték él. */
main#main-content .schedule-page > section :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600, .text-slate-500, label, legend, th, td) {
    color: var(--meduza-color-text-body);
}

main#main-content .schedule-page > section :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    border-color: var(--meduza-color-input-border);
    background-color: var(--meduza-color-input-bg);
    color: var(--meduza-color-text);
}

main#main-content .schedule-page > section :is(.border-slate-200, .border-slate-300) {
    border-color: var(--meduza-color-border-subtle);
}

/* UI-16: egyetlen gomb-variánskészlet (mz-btn), a márkaszín a tokenből jön.
   Változatok: --primary (alap), --secondary, --danger, --ghost, --icon; méretek: --sm, --lg.
   A régi .btn / .button osztályok erre aliasolnak, hogy a meglévő sablonok ne romoljanak.
   `components` rétegben van, így a Tailwind utility osztályok (w-full, mt-4, h-10 ...)
   mindig felülírhatják; a rétegsorrend a fájl elején rögzített. */
@layer components {
    :where(main#main-content) button:not([class]),
    :where(main#main-content) input[type="submit"]:not([class]),
    .mz-btn,
    .btn,
    .btn-primary,
    .button,
    input[type="submit"].btn,
    a.button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 2.25rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
        border-radius: 0.5rem;
        border: 1px solid transparent;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        color: var(--meduza-color-on-brand);
        background-color: var(--meduza-color-brand-solid);
        cursor: pointer;
        transition: background-color var(--meduza-duration-fast) ease, color var(--meduza-duration-fast) ease;
        text-decoration: none;
    }

    :where(main#main-content) button:not([class]):hover,
    :where(main#main-content) input[type="submit"]:not([class]):hover,
    .mz-btn:hover:not(:disabled),
    .btn:hover,
    .btn-primary:hover,
    .button:hover,
    a.button:hover {
        background-color: var(--meduza-color-brand-solid-hover);
    }

    .mz-btn:disabled,
    .mz-btn[aria-disabled="true"],
    .btn:disabled,
    .button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mz-btn--danger,
    .btn-danger,
    .button.danger {
        background-color: var(--meduza-color-danger-solid);
        color: var(--meduza-color-on-danger);
    }

    .mz-btn--danger:hover:not(:disabled),
    .btn-danger:hover,
    .button.danger:hover {
        background-color: var(--meduza-color-danger-solid-hover);
    }

    .mz-btn--secondary,
    .btn-secondary,
    .button.secondary,
    a.button.secondary,
    .mz-btn-outline {
        background-color: var(--meduza-color-surface-raised);
        color: var(--meduza-color-text-body);
        border: 1px solid var(--meduza-color-border);
        box-shadow: none;
    }

    .mz-btn--secondary:hover:not(:disabled),
    .btn-secondary:hover,
    .button.secondary:hover,
    a.button.secondary:hover,
    .mz-btn-outline:hover:not(:disabled) {
        background-color: var(--meduza-color-hover);
    }

    .mz-btn--ghost {
        background-color: transparent;
        color: var(--meduza-color-text-body);
        border-color: transparent;
        box-shadow: none;
    }

    .mz-btn--ghost:hover:not(:disabled) {
        background-color: var(--meduza-color-hover);
    }

    /* Ikongomb: négyzetes, szöveg nélkül; az akadálymentes nevet aria-label adja. */
    .mz-btn--icon,
    .mz-btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.25rem;
        min-height: 2.25rem;
        padding: 0.375rem;
        border-radius: 0.5rem;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
        color: var(--meduza-color-text-muted);
        cursor: pointer;
        transition: background-color var(--meduza-duration-fast) ease, color var(--meduza-duration-fast) ease;
    }

    .mz-btn--icon:hover:not(:disabled),
    .mz-btn-icon:hover:not(:disabled) {
        background-color: var(--meduza-color-hover);
        color: var(--meduza-color-text);
    }

    .mz-btn--icon:disabled,
    .mz-btn-icon:disabled,
    .mz-btn-icon[aria-disabled="true"] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .mz-btn-icon--xs {
        min-width: 1.5rem;
        min-height: 1.5rem;
        padding: 0.125rem;
    }

    .mz-btn-icon--danger:hover:not(:disabled) {
        background-color: var(--meduza-color-danger-bg);
        color: var(--meduza-color-danger);
    }

    .mz-btn--sm {
        min-height: 1.875rem;
        padding: 0.25rem 0.625rem;
        font-size: 0.8125rem;
    }

    .mz-btn--lg {
        min-height: 2.75rem;
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }

    .mz-btn--block {
        display: flex;
        width: 100%;
    }
}

/* UI-12: űrlapelemek. Explicit `.mz-input` / `.mz-select` / `.mz-textarea` osztály (a saját sablonok
   ezt használják), plusz egy nulla specificitású `:where()` tartalék a main-ben lévő, osztály nélküli
   vezérlőkre (a 2. hullám sablonjai). Mindkettő `components` rétegben van, ezért a w-64, mb-0,
   focus:ring-* stb. utility-k felülírják; a fókuszjelzés a globális, tokenes
   `:focus-visible` körvonal (design-tokens.css), a keret színe a fókusztokenre vált. */
@layer components {
    .mz-input,
    .mz-select,
    .mz-textarea,
    :where(main#main-content) :where(
        input:not([type]),
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="week"],
        select,
        textarea
    ) {
        display: block;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        border-radius: 0.5rem;
        border: 1px solid var(--meduza-color-input-border);
        background-color: var(--meduza-color-input-bg);
        color: var(--meduza-color-text);
    }

    /* A tartalék a címke alatti függőleges ritmust is adja (margó); az explicit .mz-* osztály
       margó nélküli, az elrendezést a szülő (gap, space-y) intézi. */
    :where(main#main-content) :where(
        input:not([type]),
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="week"],
        select,
        textarea
    ) {
        margin-top: 0.25rem;
        margin-bottom: 1rem;
    }

    /* Az explicit osztály margó nélküli: a main-beli tartalék margója nem érvényesül rajta,
       a távolságot a szülő (gap, space-y) vagy utility (mt-1) adja: style="margin:0" nem kell. */
    .mz-input,
    .mz-select,
    .mz-textarea {
        margin: 0;
    }

    /* Saját lenyíló-nyíl: a natív, a szélhez tapadó nyíl helyett beljebb húzott, halvány chevron
       (mindkét témában olvasható szürke), a szöveg nem fut alá. */
    .mz-select {
        -webkit-appearance: none;
        appearance: none;
        padding-right: 2.5rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem 1rem;
        cursor: pointer;
    }

    .mz-input--sm,
    .mz-select--sm {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    .mz-select--sm {
        padding-right: 2.25rem;
        background-position: right 0.5rem center;
    }

    .mz-input::placeholder,
    .mz-textarea::placeholder,
    :where(main#main-content) :where(input, textarea)::placeholder {
        color: var(--meduza-color-text-subtle);
        opacity: 1;
    }

    .mz-input:focus,
    .mz-select:focus,
    .mz-textarea:focus,
    :where(main#main-content) :where(input, select, textarea):focus {
        border-color: var(--meduza-color-focus);
    }

    .mz-input:disabled,
    .mz-select:disabled,
    .mz-textarea:disabled {
        background-color: var(--meduza-color-hover);
        color: var(--meduza-color-text-muted);
        cursor: not-allowed;
    }

    .mz-input[aria-invalid="true"],
    .mz-select[aria-invalid="true"],
    .mz-textarea[aria-invalid="true"] {
        border-color: var(--meduza-color-danger);
    }

    .mz-label {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--meduza-color-text-body);
    }

    :where(main#main-content) :where(label) {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--meduza-color-text-body);
    }

    /* Mezőhiba és súgószöveg tokenből (>= 4.5:1 mindkét témában). */
    .mz-error { color: var(--meduza-color-danger); }
    .mz-help { color: var(--meduza-color-text-muted); }
    .mz-section-title {
        margin: 0;
        padding-bottom: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--meduza-color-text-muted);
        border-bottom: 1px solid var(--meduza-color-border-subtle);
    }

    /* A kötelező mező csillagja: a danger token (>= 4.5:1 mindkét témában). */
    .mz-required {
        color: var(--meduza-color-danger);
    }
}

/* Az alapértelmezett listastílus nulla specificitású és rétegzett, így a
   Tailwind utility-osztályok (p-0, list-disc, gap-*) mindig felülírhatják. */
@layer components {
    :where(main#main-content) :where(ul) {
        list-style-type: none;
        padding: 0;
        margin: 0 0 1.5rem 0;
    }

    :where(main#main-content) :where(li) {
        padding: 0.75rem;
        border-bottom: 1px solid var(--meduza-color-border-subtle);
    }

    :where(main#main-content) :where(pre) {
        background-color: var(--meduza-color-hover);
        padding: 1rem;
        border-radius: 0.375rem;
        font-family: monospace;
        font-size: 0.875rem;
        color: var(--meduza-color-text);
        overflow-x: auto;
        margin-bottom: 1rem;
    }
}

/* UI-06: az allauth belépő-oldalak (login, MFA, jelszó) színei tokenekből jönnek, `components`
   rétegben; sötét témában (explicit vagy rendszerszintű) külön `.dark` szabály nélkül olvashatók.
   A halott `.dark ...` blokkok megszűntek (a `.dark` osztályt a kód sehol nem állítja). */
@layer components {
    .allauth-entrance h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--meduza-color-text);
        margin-bottom: 0.5rem;
        text-align: center;
    }

    .allauth-entrance p {
        font-size: 0.875rem;
        color: var(--meduza-color-text-muted);
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .allauth-entrance a {
        color: var(--meduza-color-brand);
        text-decoration: none;
        font-weight: 500;
    }

    .allauth-entrance a:hover {
        text-decoration: underline;
    }

    .allauth-entrance button,
    .allauth-entrance input[type="submit"],
    .allauth-entrance .button,
    .allauth-entrance a.button {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-weight: 600;
        margin-top: 1rem;
        background-color: var(--meduza-color-brand-solid);
        color: var(--meduza-color-on-brand);
        text-decoration: none;
    }

    .allauth-entrance .button.secondary,
    .allauth-entrance a.button.secondary {
        background-color: var(--meduza-color-surface-raised);
        color: var(--meduza-color-text-body);
        border: 1px solid var(--meduza-color-border);
    }

    .allauth-entrance .button.danger,
    .allauth-entrance a.button.danger {
        background-color: var(--meduza-color-danger-solid);
        color: var(--meduza-color-on-danger);
    }

    /* A tokenes űrlapelem-stílust a main-ből jövő .mz-input tartalék adja; itt csak a nagyobb belső tér. */
    .allauth-entrance input[type="text"],
    .allauth-entrance input[type="password"],
    .allauth-entrance input[type="email"],
    .allauth-entrance input[type="number"],
    .allauth-entrance select {
        padding: 0.75rem 1rem;
    }
}

/* A médiatár kártyái és táblája közös, CSP-kompatibilis statikus stílust kapnak. */
.media-page .media-card {
    background: var(--meduza-color-surface-raised);
    border: 1px solid var(--meduza-color-border-subtle);
    border-radius: .75rem;
}
.media-page .media-drop-zone {
    background: var(--meduza-color-surface);
    border: 1px dashed var(--meduza-color-border);
    border-radius: .75rem;
    padding: .75rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.media-page .media-drop-zone:focus,
.media-page .media-drop-zone:focus-within {
    border-color: var(--meduza-color-focus);
    outline: var(--meduza-focus-ring-width, 2px) solid var(--meduza-color-focus);
    outline-offset: 2px;
}
.media-page .media-drop-zone.is-dragover {
    background: var(--meduza-color-selected-bg);
    border-color: var(--meduza-color-brand);
}
.media-page .media-upload-progress {
    height: .625rem;
}
.media-page .media-table th {
    color: var(--meduza-color-text-muted);
    font-size: .75rem;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}
.media-page .media-table td,
.media-page .media-table th {
    padding: .75rem 1rem;
}
.media-page .media-table td {
    color: var(--meduza-color-text-body);
}
/* A címkék és a halványabb utility-szövegek tokenből (UI-24: a korábbi sötét `!important` blokk helyett). */
.media-page :is(label, .text-slate-500, .text-slate-600, .text-slate-700) {
    color: var(--meduza-color-text-body);
}
.media-page input[type='file'] {
    color: var(--meduza-color-text);
}
.media-page .media-table tbody tr {
    border-top: 1px solid var(--meduza-color-border-subtle);
}

/* ========================================================================
   Közös oldal-komponensek (mz-*): kizárólag tokenekből építkeznek, ezért
   világos és sötét témában is külön dark: változatok nélkül helyesek.
   ======================================================================== */

/* Opt-in "lapos" főtartalom: az oldal saját kártyákat rajzol, a main közvetlen
   gyermekei nem kapnak külön panel-keretet (nincs kártya a kártyában). */
@layer components {
    :where(main#main-content.mz-flat) {
        padding-top: 1.5rem;
    }
    :where(main#main-content.mz-flat) > :where(*:not(.mz-card):not(.modal-overlay):not(.modal-backdrop):not([role="dialog"]):not(.mz-alerts)) {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin-bottom: 1.5rem;
    }
    :where(main#main-content.mz-flat) > :where(.mz-card) { margin-bottom: 1.5rem; }
}

/* Egységes oldalfejléc: bal oldalt a cím-blokk (_page_title.html: eyebrow / cím / súgó / alcím),
   jobb oldalt a műveletsáv (szervezetválasztó, gombok) az alsó élükhöz igazítva; mobilon egymás alatt. */
.mz-page-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) {
    .mz-page-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
    }
}
.mz-page-header__text {
    min-width: 0;
}
.mz-page-header__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mz-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}
.mz-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meduza-color-brand);
}
.mz-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    color: var(--meduza-color-text);
}
.mz-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--meduza-color-text-muted);
}

/* Kártya és kártyafejléc. */
.mz-card {
    background-color: var(--meduza-color-surface-raised);
    border: 1px solid var(--meduza-color-border-subtle);
    border-radius: 0.75rem;
    box-shadow: var(--meduza-shadow-sm);
    min-width: 0;
}
.mz-card-pad { padding: 1rem; }
.mz-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--meduza-color-text);
}
.mz-card-divider { border-color: var(--meduza-color-border-subtle); }

/* Szöveg-tokenek. */
.mz-text { color: var(--meduza-color-text); }
.mz-text-body { color: var(--meduza-color-text-body); }
.mz-text-muted { color: var(--meduza-color-text-muted); }
.mz-text-subtle { color: var(--meduza-color-text-subtle); }

/* Táblázat: görgethető burkoló, tördelhető cellák. */
.mz-table-wrap {
    position: relative; /* a vizuálisan rejtett (abszolút) elemek se növeljék a lap szélességét */
    overflow-x: auto;
    max-width: 100%;
    /* Vízszintes görgetés vizuális jelzése: a szélen árnyék, ha van még tartalom. */
    background:
        linear-gradient(to right, var(--meduza-color-surface-raised, #fff) 30%, transparent) left center / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--meduza-color-surface-raised, #fff) 30%, transparent) right center / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.22), transparent) left center / 0.75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.22), transparent) right center / 0.75rem 100% no-repeat scroll;
}
.mz-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mz-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--meduza-color-text-muted);
    border-bottom: 1px solid var(--meduza-color-border-subtle);
    vertical-align: top;
}
.mz-table td {
    padding: 0.5rem 0.75rem;
    color: var(--meduza-color-text-body);
    border-top: 1px solid var(--meduza-color-border-subtle);
    vertical-align: top;
    overflow-wrap: anywhere;
}
.mz-table tbody tr:hover { background-color: var(--meduza-color-hover); }
/* Kulcs-érték táblázat (th scope=row). */
.mz-kv th { width: 36%; text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 500; border-bottom: 0; border-top: 1px solid var(--meduza-color-border-subtle); }
.mz-kv tr:first-child th, .mz-kv tr:first-child td { border-top: 0; }

/* Hash / azonosító: monospace, tördelhető. */
.mz-hash {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--meduza-color-text-body);
    overflow-wrap: anywhere;
}

/* Jelvény (badge): a szín mindig szöveges címkével és ikonnal párosul. */
.mz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    white-space: nowrap;
    background-color: var(--meduza-color-hover);
    color: var(--meduza-color-text-muted);
}
.mz-badge--green  { background-color: var(--meduza-badge-green-bg);  color: var(--meduza-badge-green-fg); }
.mz-badge--red    { background-color: var(--meduza-badge-red-bg);    color: var(--meduza-badge-red-fg); }
.mz-badge--yellow { background-color: var(--meduza-badge-yellow-bg); color: var(--meduza-badge-yellow-fg); }
.mz-badge--blue   { background-color: var(--meduza-badge-blue-bg);   color: var(--meduza-badge-blue-fg); }
.mz-badge--sky    { background-color: var(--meduza-badge-sky-bg);    color: var(--meduza-badge-sky-fg); }
.mz-badge--cyan   { background-color: var(--meduza-badge-cyan-bg);   color: var(--meduza-badge-cyan-fg); }
.mz-badge--indigo { background-color: var(--meduza-badge-indigo-bg); color: var(--meduza-badge-indigo-fg); }
.mz-badge--purple { background-color: var(--meduza-badge-purple-bg); color: var(--meduza-badge-purple-fg); }
.mz-badge--slate  { background-color: var(--meduza-color-hover);     color: var(--meduza-color-text-muted); }

/* Állapotpont: online zöld, offline egységesen palaszürke. */
.mz-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; background-color: var(--meduza-status-offline); }
.mz-dot--online { background-color: var(--meduza-status-online); }
.mz-dot--offline { background-color: var(--meduza-status-offline); }
.mz-dot--warning { background-color: var(--meduza-status-warning); }
.mz-dot--danger { background-color: var(--meduza-status-danger); }

/* Mérőkártya küszöbszínekkel (a szín mellett szöveges címke is megjelenik). */
.mz-stat-card {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--meduza-color-border-subtle);
    background-color: var(--meduza-color-surface-raised);
    min-width: 0;
}
.mz-stat-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meduza-color-text-muted); }
.mz-stat-value { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 700; color: var(--meduza-color-text); }
.mz-stat-flag { display: none; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; }
.mz-stat-card[data-level="warning"] { border-color: var(--meduza-status-warning); background-color: var(--meduza-color-warning-bg); }
.mz-stat-card[data-level="warning"] .mz-stat-value, .mz-stat-card[data-level="warning"] .mz-stat-flag { color: var(--meduza-color-warning); }
.mz-stat-card[data-level="danger"] { border-color: var(--meduza-status-danger); background-color: var(--meduza-color-danger-bg); }
.mz-stat-card[data-level="danger"] .mz-stat-value, .mz-stat-card[data-level="danger"] .mz-stat-flag { color: var(--meduza-color-danger); }
.mz-stat-card[data-level="warning"] .mz-stat-flag,
.mz-stat-card[data-level="danger"] .mz-stat-flag { display: block; }

/* Gombok: az ikongomb és a másodlagos kontúrgomb (.mz-btn-icon, .mz-btn-outline) az egységes
   mz-btn-készlet aliasa, a `components` rétegben van definiálva (lásd fent); itt csak a
   kontúrgomb saját méretezése marad. */
@layer components {
    .mz-btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        min-height: 2.25rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.5rem;
        cursor: pointer;
        text-decoration: none;
    }
    .mz-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
}
/* Destruktív kontúr-gomb (Remove, Cancel invitation, Delete). A színeket a
   téma-tokenek adják (világos: #b91c1c, sötét: #fca5a5), így mindkét témában
   AA kontraszt; rétegezetlen szabály, ezért nem veszik el a .mz-btn-outline mellett. */
.mz-btn-outline.mz-btn-outline-danger {
    color: var(--meduza-color-danger);
    border-color: var(--meduza-color-danger);
}
.mz-btn-outline.mz-btn-outline-danger:hover:not(:disabled) {
    background-color: var(--meduza-color-danger-bg);
    color: var(--meduza-color-danger);
}
.mz-btn-outline.mz-btn-outline-danger:focus-visible {
    outline-color: var(--meduza-color-danger);
}

/* Szűrő-chip (állapotszűrő): aria-pressed jelzi a kiválasztást. */
.mz-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--meduza-color-border);
    background-color: var(--meduza-color-surface-raised);
    color: var(--meduza-color-text-body);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}
.mz-chip:hover { background-color: var(--meduza-color-hover); }
.mz-chip[aria-pressed="true"] {
    background-color: var(--meduza-color-selected-bg);
    border-color: var(--meduza-color-brand);
    color: var(--meduza-color-brand);
    font-weight: 600;
}
.mz-chip-count {
    padding: 0 0.375rem;
    border-radius: 9999px;
    background-color: var(--meduza-color-hover);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Lépésjelvény (1/2/3): a command manager lépésfejlécéhez. */
.mz-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--meduza-color-brand);
    color: var(--meduza-color-surface-raised);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Üres / betöltő / hibaállapot egységes blokkja. */
.mz-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--meduza-color-text-muted);
}
.mz-state-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--meduza-color-text); }
.mz-state p { margin: 0; }
.mz-state--error .mz-state-title { color: var(--meduza-color-danger); }

/* Szekció-navigáció (device dashboard): tapadó pill-sor, aktív állapottal. */
.device-detail-tabs {
    position: sticky;
    top: 4rem;
    z-index: 30;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    background-color: var(--meduza-color-surface);
    scroll-snap-type: x proximity;
}
.device-detail-tabs a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--meduza-color-border);
    background-color: var(--meduza-color-surface-raised);
    color: var(--meduza-color-text-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    scroll-snap-align: start;
}
.device-detail-tabs a:hover,
.device-detail-tabs a:focus-visible {
    background-color: var(--meduza-color-selected-bg);
    border-color: var(--meduza-color-brand);
    color: var(--meduza-color-brand);
}
.device-detail-tabs a[aria-current="location"] {
    background-color: var(--meduza-color-brand);
    border-color: var(--meduza-color-brand);
    color: var(--meduza-color-surface-raised);
}
/* A szekciók horgonyra ugrásnál ne csússzanak a tapadó sáv alá. */
[data-scrollspy-target] { scroll-margin-top: 7rem; }

/* Device dashboard szekciók: külön, reszponzív rácsok (mobilon egy oszlop, lg-től 2-3 oszlop). */
.mz-dash-section { margin-bottom: 2rem; }
.mz-dash-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--meduza-color-text-muted);
}
.mz-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.mz-dash-stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (min-width: 1024px) {
    .mz-dash-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mz-dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mz-dash-span-2 { grid-column: span 2 / span 2; }
}

/* Lift kártya: hibadoboz, módosítás-jelzők, szintsorok és státuszüzenet-slotok. */
.mz-lift-alert {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--meduza-color-danger);
    border-radius: 0.5rem;
    background-color: var(--meduza-badge-red-bg);
    color: var(--meduza-badge-red-fg);
    font-size: 0.8125rem;
    font-weight: 500;
}
.mz-lift-alert ul { margin: 0; padding-left: 1.25rem; list-style: disc; }
.mz-lift-dirty,
.mz-lift-saved {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.mz-lift-dirty { background-color: var(--meduza-badge-yellow-bg); color: var(--meduza-badge-yellow-fg); }
.mz-lift-saved { background-color: var(--meduza-badge-green-bg); color: var(--meduza-badge-green-fg); }
/* Szintsorok: mobilon kompakt kártya látható feliratokkal, 768px-től rácsos sor oszlopfejléccel. */
.mz-lift-floors { display: flex; flex-direction: column; gap: 0.5rem; }
.mz-lift-floors-head { display: none; }
.mz-lift-floor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.625rem;
    border: 1px solid var(--meduza-color-border-subtle);
    border-radius: 0.5rem;
    background-color: var(--meduza-color-surface-raised);
}
.mz-lift-pos { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 600; color: var(--meduza-color-text-body); white-space: nowrap; }
.mz-lift-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.75rem; }
.mz-lift-field-label { color: var(--meduza-color-text-muted); }
.mz-lift-field input,
.mz-lift-select {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--meduza-color-border);
    border-radius: 0.5rem;
    background-color: var(--meduza-color-surface-raised);
    color: var(--meduza-color-text-body);
    font-size: 0.875rem;
}
.mz-lift-field input.mz-lift-invalid,
.mz-lift-field input[aria-invalid="true"] {
    border-color: var(--meduza-color-danger);
    outline: 2px solid var(--meduza-color-danger);
    outline-offset: 0;
}
.mz-lift-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.mz-lift-btn { justify-content: center; min-width: 2.25rem; min-height: 2.25rem; }
.mz-lift-btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (min-width: 768px) {
    .mz-lift-floors-head,
    .mz-lift-floor {
        grid-template-columns: 6rem 7rem minmax(8rem, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
    }
    .mz-lift-floors-head {
        display: grid;
        padding: 0 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--meduza-color-text-muted);
    }
    .mz-lift-floors { gap: 0; }
    .mz-lift-floor {
        padding: 0.375rem 0.25rem;
        border: 0;
        border-bottom: 1px solid var(--meduza-color-border-subtle);
        border-radius: 0;
        background-color: transparent;
    }
    .mz-lift-pos,
    .mz-lift-actions { grid-column: auto; }
    /* A rejtett felirat miatti rés nélkül a mezők egy vonalba kerülnek a gombokkal. */
    .mz-lift-field { gap: 0; }
}
/* A globális űrlapmező-margó nélkül a mezők és a gombok egy vonalban maradnak. */
.mz-lift-field input,
.mz-lift-select { margin: 0; }
@media (min-width: 768px) {
    /* Asztali nézeten az oszlopfejléc elég: a soronkénti feliratok csak a képernyőolvasónak maradnak. */
    .mz-lift-field-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Státuszüzenetek fix listája (m0..m8). Mobilon soronként egymás alá tördelt kártya (jelvény, alatta választó,
   előnézet, kapcsoló); asztali nézeten egy sorban: jelvény | média | előnézet | kapcsoló. */
.mz-lift-msgs { display: flex; flex-direction: column; gap: 0.5rem; }
.mz-lift-msg {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "badge"
        "media"
        "preview"
        "switch";
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--meduza-color-border-subtle);
    border-radius: 0.5rem;
    background-color: var(--meduza-color-surface-raised);
}
.mz-lift-msg-badge {
    grid-area: badge;
    justify-self: start;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--meduza-badge-green-bg);
    color: var(--meduza-badge-green-fg);
}
.mz-lift-msg-media { grid-area: media; }
.mz-lift-msg-preview { grid-area: preview; }
.mz-lift-msg-switch { grid-area: switch; }
.mz-lift-msg-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    font-size: 0.75rem;
    color: var(--meduza-color-text-body);
    cursor: pointer;
}
/* A kapcsoló: natív checkbox megjelenése lecserélve csúszkára; a billentyűzetes kezelés (Space) megmarad. */
.mz-lift-msg-switch input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    border-radius: 999px;
    background-color: var(--meduza-color-border);
    cursor: pointer;
    transition: background-color 0.15s;
}
.mz-lift-msg-switch input::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.15s;
}
.mz-lift-msg-switch input:checked { background-color: var(--meduza-color-brand-solid); }
.mz-lift-msg-switch input:checked::before { transform: translateX(1rem); }
.mz-lift-msg-switch input:focus-visible { outline: 2px solid var(--meduza-color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .mz-lift-msg-switch input,
    .mz-lift-msg-switch input::before { transition: none; }
}
/* Média nélküli sor: a "Teljes képernyő" kapcsoló tiltott, ezért halvány és nem kattintható kurzorú. */
.mz-lift-msg-switch--off { opacity: 0.45; cursor: not-allowed; }
.mz-lift-msg-switch input:disabled { cursor: not-allowed; }
@media (min-width: 768px) {
    .mz-lift-msg {
        grid-template-columns: 3rem minmax(10rem, 1fr) minmax(0, 4.5rem) auto;
        grid-template-areas: "badge media preview switch";
        column-gap: 0.75rem;
    }
}
.mz-lift-preview {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    font-size: 0.75rem;
    color: var(--meduza-color-text-muted);
}
.mz-lift-preview img { max-width: 100%; max-height: 3.5rem; object-fit: contain; border-radius: 0.375rem; }
/* Kiválasztott média nélkül az előnézet nem foglal helyet (kompakt slot-rács). */
.mz-lift-preview:empty { display: none; }

/* A hidden attribútum a display:flex/grid szabályok ellenére is elrejt. */
.mz-lift-alert[hidden],
.mz-lift-dirty[hidden],
.mz-lift-saved[hidden],
.mz-lift-floors-head[hidden] { display: none; }

/* OTA lépéssor (pending → verified). */
.mz-steps { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.mz-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.125rem 0.5rem;
    border: 0;
    border-radius: 9999px;
    /* UI-32: a túl kicsi (11px) betűméret helyett legalább 0.75rem (12px). */
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--meduza-color-hover);
    color: var(--meduza-color-text-muted);
}
.mz-steps li[data-step-state="done"] { background-color: var(--meduza-badge-green-bg); color: var(--meduza-badge-green-fg); }
.mz-steps li[data-step-state="current"] { background-color: var(--meduza-badge-blue-bg); color: var(--meduza-badge-blue-fg); outline: 1px solid var(--meduza-color-brand); }
.mz-steps li[data-step-state="failed"] { background-color: var(--meduza-badge-red-bg); color: var(--meduza-badge-red-fg); }

/* Táblázat -> egymás alatti kártyák sm alatt (cellák data-label alapján). */
@media (max-width: 639.98px) {
    .mz-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mz-stack thead th { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .mz-stack, .mz-stack tbody, .mz-stack tr, .mz-stack td { display: block; width: 100%; }
    .mz-stack tr {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--meduza-color-border-subtle);
        border-radius: 0.75rem;
        background-color: var(--meduza-color-surface-raised);
    }
    .mz-stack td { display: block; padding: 0.375rem 0; border-top: 0; text-align: left; }
    .mz-stack td::before { content: attr(data-label); display: block; margin-bottom: 0.125rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meduza-color-text-muted); }
    .mz-stack td[data-label=""] { display: flex; justify-content: flex-end; }
    .mz-stack td[data-label=""]::before { content: none; }
}

/* Utility-fordítás: a csak világos Tailwind osztályok tokenekre képezése.
   Csak azokra az elemekre, amelyek nem adnak explicit `dark:` változatot,
   így sötét témában sem marad fehér panel vagy sötét szöveg sötét alapon.
   Világos témában az értékek a Tailwind-skálával azonosak (a slate-400/500
   szöveg kontrasztosabb: legalább 4.5:1). Felület-szintek: surface-raised,
   surface, hover; szöveg: text, text-body, text-muted, text-subtle. */
main#main-content .bg-white:not([class*="dark:"]) { background-color: var(--meduza-color-surface-raised); }
main#main-content :is(.bg-slate-50, .bg-slate-50\/75, .bg-slate-50\/60):not([class*="dark:"]) { background-color: var(--meduza-color-surface); }
main#main-content .bg-slate-100:not([class*="dark:"]) { background-color: var(--meduza-color-hover); }
main#main-content .bg-slate-200:not([class*="dark:"]) { background-color: var(--meduza-color-border-subtle); }
main#main-content :is(.bg-blue-50, .bg-indigo-50, .bg-blue-50\/50, .bg-blue-50\/30):not([class*="dark:"]) { background-color: var(--meduza-color-selected-bg); }
main#main-content .bg-blue-100:not([class*="dark:"]) { background-color: var(--meduza-badge-blue-bg); }
main#main-content .bg-indigo-100:not([class*="dark:"]) { background-color: var(--meduza-badge-indigo-bg); }
main#main-content .bg-purple-100:not([class*="dark:"]) { background-color: var(--meduza-badge-purple-bg); }
main#main-content :is(.bg-red-50, .bg-red-100):not([class*="dark:"]) { background-color: var(--meduza-color-danger-bg); }
main#main-content :is(.bg-emerald-50, .bg-emerald-100):not([class*="dark:"]) { background-color: var(--meduza-color-success-bg); }
main#main-content :is(.bg-amber-50, .bg-amber-100, .bg-orange-100):not([class*="dark:"]) { background-color: var(--meduza-color-warning-bg); }
main#main-content :is(.text-slate-900, .text-slate-800):not([class*="dark:"]) { color: var(--meduza-color-text); }
main#main-content .text-slate-700:not([class*="dark:"]) { color: var(--meduza-color-text-body); }
main#main-content :is(.text-slate-600, .text-slate-500):not([class*="dark:"]) { color: var(--meduza-color-text-muted); }
main#main-content .text-slate-400:not([class*="dark:"]) { color: var(--meduza-color-text-subtle); }
main#main-content :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800):not([class*="dark:"]) { color: var(--meduza-color-danger); }
main#main-content :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-orange-700):not([class*="dark:"]) { color: var(--meduza-color-warning); }
main#main-content :is(.text-emerald-600, .text-emerald-700):not([class*="dark:"]) { color: var(--meduza-color-success); }
main#main-content :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-500, .text-indigo-600, .text-indigo-700):not([class*="dark:"]) { color: var(--meduza-color-brand); }
main#main-content .text-purple-700:not([class*="dark:"]) { color: var(--meduza-badge-purple-fg); }
main#main-content :is(.border-slate-100, .border-slate-200, .border-slate-50):not([class*="dark:"]) { border-color: var(--meduza-color-border-subtle); }
main#main-content .border-slate-300:not([class*="dark:"]) { border-color: var(--meduza-color-border); }
main#main-content :is(.border-red-100, .border-red-200):not([class*="dark:"]) { border-color: color-mix(in srgb, var(--meduza-color-danger) 40%, transparent); }
main#main-content :is(.border-blue-100, .border-blue-200, .border-indigo-200, .border-indigo-300):not([class*="dark:"]) { border-color: color-mix(in srgb, var(--meduza-color-brand) 40%, transparent); }
main#main-content :is(.border-amber-200):not([class*="dark:"]) { border-color: color-mix(in srgb, var(--meduza-color-warning) 40%, transparent); }
main#main-content :is(.border-emerald-200):not([class*="dark:"]) { border-color: color-mix(in srgb, var(--meduza-color-success) 40%, transparent); }
main#main-content .placeholder-slate-400:not([class*="dark:"])::placeholder { color: var(--meduza-color-text-subtle); }
main#main-content :is(.hover\:bg-slate-50, .hover\:bg-slate-100, .hover\:bg-slate-50\/60):hover:not([class*="dark:"]) { background-color: var(--meduza-color-hover); }
main#main-content .hover\:bg-slate-200:hover:not([class*="dark:"]) { background-color: var(--meduza-color-surface-muted); }
main#main-content :is(.hover\:bg-red-50, .hover\:bg-red-100):hover:not([class*="dark:"]) { background-color: var(--meduza-color-danger-bg); }
main#main-content :is(.hover\:bg-blue-50, .hover\:bg-indigo-50, .hover\:bg-blue-100):hover:not([class*="dark:"]) { background-color: var(--meduza-color-selected-bg); }
main#main-content :is(.hover\:bg-amber-50, .hover\:bg-amber-100):hover:not([class*="dark:"]) { background-color: var(--meduza-color-warning-bg); }
main#main-content :is(.hover\:bg-emerald-100):hover:not([class*="dark:"]) { background-color: var(--meduza-color-success-bg); }
main#main-content :is(.hover\:text-slate-600, .hover\:text-slate-800, .hover\:text-slate-900):hover:not([class*="dark:"]) { color: var(--meduza-color-text); }
main#main-content :is(.hover\:text-red-600):hover:not([class*="dark:"]) { color: var(--meduza-color-danger); }
main#main-content :is(.hover\:text-blue-600, .hover\:text-blue-700, .hover\:text-blue-900, .hover\:text-indigo-600):hover:not([class*="dark:"]) { color: var(--meduza-color-brand); }

/* Ikon-gombok és linkek egységes, látható fókuszgyűrűje (WCAG 2.4.7). */
:where(.mz-btn-icon, .mz-btn-outline, .mz-chip, [data-copy-text]):focus-visible {
    outline: var(--meduza-focus-ring-width, 2px) solid var(--meduza-color-focus);
    outline-offset: var(--meduza-focus-ring-offset, 2px);
}

/* Kontraszt-védőháló (UI-13) a még utility-kkel (text-slate-400, border-slate-300) stílusozott
   vezérlőkre: a `dark:` változat jelenléte a fenti fordítóréteget kikapcsolja, ezért itt a
   token dönt (világos és sötét témában is >= 3:1). A rétegen kívüli szabály a rétegezett
   utility-ket specificitástól függetlenül legyőzi. Új sablonban .mz-btn-icon / .mz-input kell. */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea).border-slate-300 {
    border-color: var(--meduza-color-input-border);
}
.text-slate-400:is(button, [role="button"]) {
    color: var(--meduza-color-text-muted);
}
.text-slate-400:is(button, [role="button"]):hover {
    color: var(--meduza-color-text);
}

/* Közös, tokenes komponensek a `components` rétegben (az utility-k felülírhatják). */
@layer components {
    /* Flash-üzenet (UI-05): a szín- és háttérpár tokenekből, így világos és sötét témában is >= 4.5:1. */
    .mz-alerts {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .mz-alert {
        --mz-alert-fg: var(--meduza-color-info);
        --mz-alert-bg: var(--meduza-color-info-bg);
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: var(--meduza-radius-md);
        border: 1px solid color-mix(in srgb, var(--mz-alert-fg) 45%, transparent);
        background-color: var(--mz-alert-bg);
        color: var(--mz-alert-fg);
    }
    .mz-alert--success { --mz-alert-fg: var(--meduza-color-success); --mz-alert-bg: var(--meduza-color-success-bg); }
    .mz-alert--info { --mz-alert-fg: var(--meduza-color-info); --mz-alert-bg: var(--meduza-color-info-bg); }
    .mz-alert--warning { --mz-alert-fg: var(--meduza-color-warning); --mz-alert-bg: var(--meduza-color-warning-bg); }
    .mz-alert--error { --mz-alert-fg: var(--meduza-color-danger); --mz-alert-bg: var(--meduza-color-danger-bg); }
    .mz-alert__icon {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.0625rem;
    }
    .mz-alert__text {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
        color: inherit;
        overflow-wrap: anywhere;
    }
    .mz-alert__close {
        flex-shrink: 0;
        margin: -0.375rem -0.5rem -0.375rem 0;
        color: inherit;
    }
    .mz-alert__close:hover:not(:disabled) {
        background-color: color-mix(in srgb, currentColor 14%, transparent);
        color: inherit;
    }

    /* Oldalháttér és márkajel a belépő-/auth-oldalakhoz (nincs fix szín: tokenek). */
    .mz-page-bg { background-color: var(--meduza-color-surface); }
    .mz-brand-mark {
        background-color: var(--meduza-color-brand-solid);
        color: var(--meduza-color-on-brand);
    }

    /* Jelölőnégyzet / rádió: a böngésző saját vezérlője a márka-tokenre színezve. */
    .mz-checkbox { accent-color: var(--meduza-color-brand-solid); }

    /* A márkaszínű sávban lévő cím/bekezdés örökli a sáv (on-brand) színét, és nem kap alsó margót
       a main-beli tipográfiai alapból. */
    .mz-on-brand { color: inherit; margin-bottom: 0; }
    /* Szövegközi hivatkozás: a márka-token (>= 4.5:1 mindkét témában). */
    .mz-link { color: var(--meduza-color-brand); font-weight: 500; }
    .mz-link:hover { text-decoration: underline; }

    /* Modális panel és lábléc (a dialógus-sablonokhoz): egy markup-minta, tokenekből. */
    .mz-modal-panel {
        width: 100%;
        max-width: 28rem;
        border-radius: 0.75rem;
        background-color: var(--meduza-color-surface-raised);
        color: var(--meduza-color-text);
        border: 1px solid var(--meduza-color-border-subtle);
        box-shadow: var(--meduza-shadow-md);
    }
    .mz-modal-header,
    .mz-modal-footer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1.25rem;
    }
    .mz-modal-header {
        justify-content: space-between;
        border-bottom: 1px solid var(--meduza-color-border-subtle);
    }
    .mz-modal-title {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--meduza-color-text);
    }
    .mz-modal-body { padding: 1.5rem; }
    .mz-modal-footer {
        justify-content: flex-end;
        border-top: 1px solid var(--meduza-color-border-subtle);
        background-color: var(--meduza-color-surface);
        border-radius: 0 0 0.75rem 0.75rem;
    }
}