/* ============================================================
   Elioplus Design System - document and framework base
   ============================================================

   Rules that style the document itself, Blazor's own markup, or elements that no
   single component owns. Global by intent, and the only place in the system that
   styles a bare element selector.

   What is deliberately NOT here: anything naming an application's own classes, and
   anything loading a brand asset. A consuming application keeps those in its own
   base stylesheet, linked after this one.
   ============================================================ */

/* --- Document --------------------------------------------------------------
   The type family the system is designed against. A consumer that wants a
   different face overrides --ds-font-family in its brand stylesheet. */
html, body {
    font-family: var(--ds-font-family);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* --- Keyboard focus --------------------------------------------------------
   One visible ring for every link and button, shown only for keyboard focus
   (:focus-visible), never on a mouse click. MudBlazor's own focus state is a 1-2%
   background tint, which is not a visible indicator (WCAG 2.4.7); pages used to draw
   their own rings and lost them when their stylesheets were retired. The selectors are
   element + pseudo-class (0,1,1), so they outrank MudBlazor's single-class `outline: 0`
   resets by specificity alone, with no priority flag. Text fields are deliberately not
   listed: their outlined border already shows focus. A Ds* component that draws its own
   ring (DsTile, DsChoice, DsStepProgress, DsWordmark) keeps it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
    outline: 2px solid var(--ds-focus-ring);
    outline-offset: 2px;
}

/* --- Form validation -------------------------------------------------------
   Blazor's own validation classes, which the framework applies to inputs inside
   an EditForm. The colours are the Blazor template's originals, named as tokens
   so a consumer can restyle them without overriding these rules. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ds-valid);
}

.invalid {
    outline: 1px solid var(--ds-invalid);
}

.validation-message {
    color: var(--ds-invalid);
}

/* --- Blazor error boundary ------------------------------------------------- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--ds-error-boundary);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--ds-text-inverse);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* --- Blazor unhandled-error bar --------------------------------------------
   The #blazor-error-ui element every host page carries. Hidden until the framework
   shows it (it sets display: block inline), then pinned to the bottom of the
   viewport. Every application used to keep its own copy of this rule, and one had
   none, which left the bar permanently visible. */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--ds-error-ui);
    bottom: 0;
    box-shadow: var(--ds-error-ui-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}


/* --- Heading scale ---------------------------------------------------------
   Scoped to native headings on purpose.

   These rules also listed .mud-typography-h1/h2/h3. Against those classes they
   tie with MudBlazor's own typography rules on specificity and win or lose purely
   on link order, so a MudText with Typo.h1 would jump to the size below whenever
   this file happened to come later. Native h1/h2/h3 is what this scale is for,
   and MudBlazor styles neither of those. */
h1 { font-size: var(--ds-text-32); font-weight: 700; }
h2 { font-size: var(--ds-text-24); font-weight: 600; }
h3 { font-size: var(--ds-text-20); font-weight: 600; }

/* --- Plain tables ----------------------------------------------------------
   For <table> markup that is not a MudBlazor table; the MudBlazor equivalent
   lives in styles/integrations/mudblazor.css. */
table thead tr {
    background: var(--ds-surface-alt);
}

table thead th {
    font-weight: 600;
    font-size: var(--ds-text-13);
    color: var(--ds-text-body);
}

table tbody tr:hover {
    background: var(--ds-surface-alt);
}