/*
    Globális alapréteg. A Bootstrap kikerült: a design rendszer saját tokenekre és komponensekre
    épül, és két versengő stílusforrás (bootstrap + tokenek) mellett minden komponensnél
    eldöntendő lett volna, melyik nyer.

    A tokenek a tokens.css-ben élnek — ez a fájl kizárólag az elemi HTML alapját állítja be.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
    ⚠️ A FÓKUSZGYŰRŰ A GÖRGETŐ TÁROLÓK SZÉLÉN (fókusz-audit, 10. és 11. lelet). Tab-ra a böngésző a
    fókuszált elemet csak „épp annyira" görgeti be, hogy az ELEM látsszon — a 4 px-es gyűrű ilyenkor
    a görgető tároló (a lap, a bal menü, az admin-táblázatok vízszintes görgetője) szélén kívül
    esik, és levágódik. Mérve: 32 megálló a lap és a menü szélén, és a Tartalmi pillérek
    „Szerkesztés" gombjai a táblázat-görgető jobb szélén.
    A `scroll-padding` a görgetés CÉLTERÜLETÉT szűkíti: a böngésző ennyivel beljebb állítja meg az
    elemet, tehát a gyűrű a tárolón belül marad. MINDEN elemre, mert csak a görgető tárolókon hat
    (minden másra hatástalan), és egy laponkénti felsorolás a következő új görgető tárolónál
    elmaradna. Nulla specificitás (`*`): a saját `scroll-padding`-et állító tárolók (Tabs,
    SlideOverPanel) felülírják.
    ⚠️ Érték: `--space-4`, NEM a Tabs/SlideOverPanel `--space-2`-je — MÉRT különbség. A gyűrű nem
    mindig az elemen ül: a `TagInput`-nál a DOBOZON (`:has(… :focus-visible)`), ami a mező alatt
    még 9 px-rel lejjebb ér. `--space-2`-vel a böngésző a mezőt 8 px-re állította meg a képernyő
    aljától, a doboz gyűrűje így levágódott (a Célközönség „Fájdalmaik" mezője OK → WEAK).
*/
* {
    scroll-padding: var(--space-4);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-surface-muted);
    color: var(--color-text);
    font: var(--text-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

a {
    color: var(--color-primary-text);
}

button {
    font-family: inherit;
}

/* A validációs üzenet a mező MELLETT jelenik meg, és a szövege a sötétebb piros — a #DC2626
   szövegként a --color-surface-muted hátteren 4.43, tehát bukna. */
.validation-message,
.field-error {
    margin: 0;
    color: var(--color-danger-text);
    font: var(--text-sm);
}

/* ── A Blazor keretrendszer saját elemei ─────────────────────────────────── */

#blazor-error-ui {
    color-scheme: light only;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-toast);
    display: none;
    padding: var(--space-3) var(--space-5);
    background: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
    box-shadow: var(--shadow-overlay);
}

#blazor-error-ui .dismiss {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: var(--space-2);
    cursor: pointer;
}

.blazor-error-boundary {
    padding: var(--space-4);
    border-radius: var(--radius-card);
    background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    color: var(--color-danger-text);
}

.blazor-error-boundary::after {
    content: "Váratlan hiba történt ezen a részen.";
}

/* A WASM betöltés-jelzője — az egyetlen felület, ami a tokenek betöltése előtt látszik. */
.loading-progress {
    position: absolute;
    display: block;
    inline-size: 8rem;
    block-size: 8rem;
    inset: 20vh 0 auto 0;
    margin-inline: auto;
}

.loading-progress circle {
    fill: none;
    stroke: #EAEAEA;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #FF3EAA;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Betöltés");
}

/* ── Nyomtatás ───────────────────────────────────────────────────────────── */

@media print {
    body {
        background: #FFFFFF;
        color: #111111;
    }

    a::after {
        /* Papíron a „kattints ide" használhatatlan. */
        content: " (" attr(href) ")";
        font-size: .8em;
    }
}