#blazor-error-ui {
    display: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* ============================================================================
   BACKWARD-COMPATIBLE VARIABLE ALIASES
   ============================================================================
   These variables now reference the unified design tokens from DesignTokens.css
   (loaded from SLYD.Components package).

   This allows all existing platform CSS to work without changes while using
   the new unified design system with Cyan primary color.
   ============================================================================ */
:root {
    /* Color Aliases */
    --primary: var(--slyd-primary);                /* Cyan hsl(186, 94%, 43%) */
    --primary-dark: var(--slyd-primary-dark);
    --secondary: var(--slyd-secondary);            /* Emerald */
    --tertiary: var(--slyd-accent-pink);           /* Pink accent */

    /* Background Aliases */
    --bg-dark: var(--slyd-bg-body);                /* Dark navy #020617 */
    --bg-darker: var(--slyd-bg-dark);              /* Darker blue #0F172A */

    /* Text Aliases */
    --light: var(--slyd-text-primary);             /* Light text #F8FAFC */

    /* Semantic Color Aliases */
    --warning: var(--slyd-warning);                /* Amber */
    --danger: var(--slyd-danger);                  /* Red */
}

/* Base styling for components-reconnect-modal */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 6, 23, 0.4);
    backdrop-filter: blur(3px);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

/* Container for the dialog content */
#components-reconnect-modal > div {
    background-color: rgba(15, 23, 42, 0.85);
    border-radius: 16px;
    padding: 2rem;
    width: 350px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    text-align: center;
    color: var(--light);
    font-family: 'Space Grotesk', sans-serif;
    backdrop-filter: blur(10px);
}

/* Show the modal when connection state changes */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal.components-reconnect-hide{
    display: none;
}

/* Style headings to match our custom modal */
#components-reconnect-modal h5 {
    margin: 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

/* Style paragraphs and text */
#components-reconnect-modal p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    color: white;
}

/* Style buttons/links in the modal */
#components-reconnect-modal a,
#components-reconnect-modal button {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
}

#components-reconnect-modal a:hover,
#components-reconnect-modal button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Custom content styling by state */
#components-reconnect-modal.components-reconnect-show h5::after {
    content: "Attempting to reconnect...";
}

#components-reconnect-modal.components-reconnect-failed h5::after,
#components-reconnect-modal.components-reconnect-rejected h5::after {
    content: "Connection failed. Please refresh the page.";
}

/* Spinner animation for use by components */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}