/* /Components/Base/NlConfirmDialog.razor.rz.scp.css */
/* The admin confirmation dialog.

   Tokens only - no literal colours. The admin chrome is theme-independent, but it still draws from the
   same token set as everything else, so a token change reaches here too.

   Type sits on the ordinary 18px body floor and the buttons on the 44px target floor. This is staff
   chrome on a desktop-only screen, but the floors are not a public-page concession: they are the rules
   the UI suite enforces on every screen, and a dialog that asks somebody to cancel an event with paid
   registrations is the last place to start shrinking text. */

.nl-confirm[b-0n1l95hhrt] {
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    width: min(34rem, calc(100vw - var(--space-7)));
    padding: 0;
    border: var(--border-emphasis) solid var(--border-strong);
    border-radius: var(--radius-control);
}

/* The browser paints the modal backdrop; ours only needs to be dark enough to say "the page behind is
   not available", without hiding the context the dialog is talking about. */
.nl-confirm[b-0n1l95hhrt]::backdrop {
    background: rgb(0 0 0 / 45%);
}

.nl-confirm-panel[b-0n1l95hhrt] {
    padding: var(--space-7);
}

.nl-confirm-title[b-0n1l95hhrt] {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-heading-3);
    line-height: var(--line-height-heading);
}

.nl-confirm-body > :first-child[b-0n1l95hhrt] {
    margin-top: 0;
}

.nl-confirm-body > :last-child[b-0n1l95hhrt] {
    margin-bottom: 0;
}

.nl-confirm-actions[b-0n1l95hhrt] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

/* The destructive dialogs carry a danger-toned edge. It is a SECOND signal, never the only one: the
   heading already says "Cancel this event?" and the confirm button is worded, so colour adds emphasis
   to a message that survives without it. */
.nl-confirm.is-danger[b-0n1l95hhrt] {
    border-color: var(--danger);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* CSS isolation is used for component-local LAYOUT only. It never redefines a colour, a type size
   or a radius: those come from tokens.css (DESIGN_TOKENS.md 1). Everything below is a var(). */

#blazor-error-ui[b-mdzzhhtgzo] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--danger-bg);
    border-top: var(--border-emphasis) solid var(--danger);
    color: var(--text-primary);
}

/* Blazor sets display:block from JavaScript when an error occurs. Flex is what we actually want,
   so the layout is applied here rather than fighting the framework's inline style. */
#blazor-error-ui[style*="display: block"][b-mdzzhhtgzo],
#blazor-error-ui[style*="display:block"][b-mdzzhhtgzo] {
    display: flex !important;
    flex-wrap: wrap;
}

#blazor-error-ui .message[b-mdzzhhtgzo],
#blazor-error-ui .reload[b-mdzzhhtgzo] {
    display: flex;
    flex-direction: column;
}

#blazor-error-ui .vi[b-mdzzhhtgzo] {
    color: var(--text-secondary);
    font-size: var(--font-size-secondary);
}

#blazor-error-ui .reload[b-mdzzhhtgzo] {
    color: var(--accent);
    font-weight: var(--font-weight-medium);
    min-height: var(--tap-min);
    justify-content: center;
}

#blazor-error-ui .dismiss[b-mdzzhhtgzo] {
    margin-left: auto;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    cursor: pointer;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The circuit-dropped dialog.

   The framework's JavaScript toggles the "components-reconnect-*" classes on the dialog, so the
   selectors below are contractual. What is ours is the appearance: tokens, not the template's
   #6b9ed2 / #0087ff blues, which belong to no theme we own. The architecture test caught those.

   The button is a full 44px target and the text sits on the normal 18px floor. Someone whose
   connection has just dropped is not the person to hand a 12px link to. */

.components-reconnect-first-attempt-visible[b-q4s04011t6],
.components-reconnect-repeated-attempt-visible[b-q4s04011t6],
.components-reconnect-failed-visible[b-q4s04011t6],
.components-pause-visible[b-q4s04011t6],
.components-resume-failed-visible[b-q4s04011t6],
.components-rejoining-animation[b-q4s04011t6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-retrying[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-failed[b-q4s04011t6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-q4s04011t6] {
    display: block;
}

#components-reconnect-modal[b-q4s04011t6] {
    background-color: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    width: min(28rem, calc(100vw - var(--space-7)));
    margin: 20vh auto;
    padding: var(--space-7);
    border: var(--border-emphasis) solid var(--border-strong);
    border-radius: var(--radius-panel);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-q4s04011t6 0.5s both;
}

#components-reconnect-modal[open][b-q4s04011t6] {
    animation: components-reconnect-modal-fadeInOpacity-b-q4s04011t6 0.5s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-q4s04011t6]::backdrop {
    /* The one place a raw colour is unavoidable: a backdrop needs alpha, and a scrim is not a
       brand colour. Kept as a neutral black at 40%, identical in all three themes. */
    background-color: rgb(0 0 0 / 40%);
    animation: components-reconnect-modal-fadeInOpacity-b-q4s04011t6 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-fadeInOpacity-b-q4s04011t6 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-q4s04011t6 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-q4s04011t6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

#components-reconnect-modal p[b-q4s04011t6] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal .en[b-q4s04011t6] {
    display: block;
}

#components-reconnect-modal .vi[b-q4s04011t6] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size-secondary);
}

/* The line that matters most. Set apart, and present in every state of the dialog. */
.components-reassurance[b-q4s04011t6] {
    padding-top: var(--space-4);
    border-top: var(--border-hairline) solid var(--border-default);
    width: 100%;
    color: var(--text-primary);
}

#components-reconnect-modal button[b-q4s04011t6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    border: var(--border-emphasis) solid var(--accent);
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-control);
    cursor: pointer;
}

/* On the accent fill, the Vietnamese line must inherit the button's text colour. Left to
   --text-secondary it would be dark-green-on-dark-green. */
#components-reconnect-modal button .vi[b-q4s04011t6] {
    color: inherit;
}

#components-reconnect-modal button:hover[b-q4s04011t6] {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.components-rejoining-animation[b-q4s04011t6] {
    position: relative;
    width: var(--space-10);
    height: var(--space-10);
}

.components-rejoining-animation div[b-q4s04011t6] {
    position: absolute;
    border: 3px solid var(--accent);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-q4s04011t6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-q4s04011t6] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-q4s04011t6 {
    0%    { top: 32px; left: 32px; width: 0;    height: 0;    opacity: 0; }
    4.9%  { top: 32px; left: 32px; width: 0;    height: 0;    opacity: 0; }
    5%    { top: 32px; left: 32px; width: 0;    height: 0;    opacity: 1; }
    100%  { top: 0;    left: 0;    width: 64px; height: 64px; opacity: 0; }
}
/* /Components/Pages/Styleguide.razor.rz.scp.css */
/* Review-tool chrome for the styleguide page only. Layout only, tokens only, no raw values.
   None of this appears in the public interface. */

.sg-bar[b-7ljv4gnfcx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-subtle);
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-panel);
}

.sg-bar-label[b-7ljv4gnfcx] {
    font-weight: var(--font-weight-medium);
}

.sg-bar-note[b-7ljv4gnfcx] {
    color: var(--text-secondary);
    font-size: var(--font-size-meta);
}

.sg-select[b-7ljv4gnfcx] {
    width: auto;
    min-width: var(--space-10);
}