/* The application shell's own screens (K-257). Design tokens live in
   Rax.Web; this file styles what the HOST draws around every product:
   the settings drawer's links, the extension list, the single session
   scrim and the startup screen. It used to be the product's app.css;
   not one rule here was the product's. Not one colour, space or font
   size is INVENTED here; all are read from tokens.css. */

/* The install row BORROWS the look of `.rax-settings-link` but it is a
   button, not a link: there is no address to go to, it makes the
   browser ask a question. The button's own defaults (font, background,
   centred text) are undone — so the look stays the same. */
.rax-settings-link {
    width: 100%;
    font: inherit;
    font-size: var(--fs-body);
    background: none;
    text-align: start;
    cursor: pointer;
}

.rax-extension-preview {
    margin-block-start: var(--sp-4);
}

.rax-extension-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.rax-extension-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background: var(--c-surface);
}

.rax-extension-row[data-enabled='False'] {
    opacity: 0.78;
}

.rax-extension-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 24px;
    line-height: 1;
    color: var(--c-ink-3);
}

.rax-extension-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sp-1);
}

.rax-extension-main strong,
.rax-extension-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rax-extension-main strong {
    font-size: var(--fs-input);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

.rax-extension-main small,
.rax-extension-state {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

@media (max-width: 720px) {
    .rax-extension-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rax-extension-state,
    .rax-extension-row .rz-button {
        grid-column: 2;
        justify-self: start;
    }
}

/* ------------------------------------------------------------
   SINGLE SESSION SCRIM

   It covers the WHOLE application: this is not a warning but a stop.
   The screen behind the scrim is working but its owner is another
   tab; left clickable, two tabs could edit the same record at the
   same time.

   `z-index` is ABOVE the settings drawer and Radzen's modal dialogs:
   a drawer left open must not come out in front of the scrim.
   ------------------------------------------------------------ */
.rax-single {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--sp-5);

    /* The background is not fully hidden: the user keeps seeing which
       application they are in, they just cannot touch it. */
    background: color-mix(in srgb, var(--c-canvas) 88%, transparent);
    backdrop-filter: blur(2px);
}

.rax-single-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    max-width: 30rem;
    padding: var(--sp-6);
    text-align: center;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
}

.rax-single-icon {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: 40px;
    line-height: 1;
    color: var(--c-ink-3);
}

.rax-single-card h2 {
    margin: 0;
    font-size: var(--fs-section);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

.rax-single-card p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-ink-2);
}

/* One button, one way. There is NO "Cancel": there is nothing to
   cancel either — closing the tab is up to the user and the browser
   already offers it. */
.rax-single-ok {
    margin-block-start: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-control);
    background: var(--c-accent);
    color: var(--c-surface);
    font: inherit;
    font-size: var(--fs-input);
    cursor: pointer;
}

.rax-single-ok:hover { filter: brightness(1.08); }


/* ============================================================
   STARTUP SCREEN (K-238)

   Prerendering is off; until the circuit was set up the body was
   empty. This mark fills that gap. It disappears the moment the shell
   (`.rax-shell`) or the shell-less layout (`.rax-plain-page`) is drawn —
   the decision is in CSS, no script. Thanks to the synchronous script in
   `head` the theme is right on the first frame: dark background in the
   dark theme, no flash.

   The host's file since K-257: every product gets the startup screen.
   ============================================================ */
.rax-boot {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--sp-3);
    background: var(--c-canvas);
    color: var(--c-ink-3);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
}

body:has(.rax-shell, .rax-plain-page) .rax-boot {
    display: none;
}

/* A larger version of the brand mark at the shell's top left: the same identity. */
.rax-boot-mark {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--r-card);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 1.35rem;
    font-weight: 700;
}

.rax-boot-track {
    position: relative;
    inline-size: 120px;
    block-size: 2px;
    border-radius: 1px;
    background: var(--c-field-line);
    overflow: hidden;
}

.rax-boot-run {
    position: absolute;
    inset-block: 0;
    inline-size: 40%;
    border-radius: 1px;
    background: var(--c-accent);
    animation: rax-boot-run 1.1s var(--motion-ease) infinite;
}

/* The text and the «taking long» warning are delayed: on a fast start
   only the mark shows, the text never appears. */
.rax-boot-text {
    animation: rax-boot-in var(--motion-screen) ease-out 600ms both;
}

.rax-boot-slow {
    max-inline-size: 28ch;
    text-align: center;
    animation: rax-boot-in var(--motion-screen) ease-out 8s both;
}

.rax-boot-retry {
    border: 0;
    padding: 0;
    background: none;
    color: var(--c-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rax-boot-retry:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

@keyframes rax-boot-run {
    from { inset-inline-start: -40%; }
    to   { inset-inline-start: 100%; }
}

@keyframes rax-boot-in {
    from { opacity: 0; visibility: hidden; }
    to   { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .rax-boot-run {
        animation: none;
        inset-inline-start: 30%;
    }
}

/* ============================================================
   RECONNECTION OVERLAY (K-302)

   Drawn only while Blazor says so: the element is in every interactive
   page, hidden; Blazor adds a `components-reconnect-*` class for the
   state and this file shows the one sentence that belongs to it. The
   same mark and track as the startup screen: losing the server and
   waiting for it are the same picture.
   ============================================================ */
.rax-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    place-content: center;
    background: var(--c-scrim);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    color: var(--c-ink-2);
}

.rax-reconnect.components-reconnect-show,
.rax-reconnect.components-reconnect-retrying,
.rax-reconnect.components-reconnect-failed,
.rax-reconnect.components-reconnect-rejected,
.rax-reconnect.components-reconnect-paused,
.rax-reconnect.components-reconnect-resume-failed {
    display: grid;
}

.rax-reconnect-card {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    min-inline-size: 18rem;
    max-inline-size: 28rem;
    padding: var(--sp-6);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background: var(--c-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    text-align: center;
}

/* One sentence at a time: the one whose state Blazor set. */
.rax-reconnect-text {
    display: none;
    margin: 0;
}

.components-reconnect-show .rax-reconnect-text[data-state='show'],
.components-reconnect-retrying .rax-reconnect-text[data-state='retrying'],
.components-reconnect-failed .rax-reconnect-text[data-state='failed'],
.components-reconnect-rejected .rax-reconnect-text[data-state='rejected'],
.components-reconnect-paused .rax-reconnect-text[data-state='paused'],
.components-reconnect-resume-failed .rax-reconnect-text[data-state='resume-failed'] {
    display: block;
}

/* The track runs while trying; it stands still once Blazor gave up. */
.components-reconnect-failed .rax-boot-run,
.components-reconnect-rejected .rax-boot-run {
    animation-play-state: paused;
}