/* /Components/Common/Errors/BlazorErrorUI.razor.rz.scp.css */
#blazor-error-ui[b-yw8nbfbyey]
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/* Container & Background Overlay */
.error-dialog-container[b-yw8nbfbyey]
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.error-overlay[b-yw8nbfbyey]
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Modal Box */
.error-dialog[b-yw8nbfbyey]
{
    position: relative;
    z-index: 10000;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 444px;
    padding: 24px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: rgba(0, 0, 0, 0.87);
}

/* Header / Title */
.error-dialog-title[b-yw8nbfbyey]
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.error-icon[b-yw8nbfbyey]
{
    width: 28px;
    height: 28px;
    fill: #ffa726; /* Warning color */
    flex-shrink: 0;
}

.error-title-text[b-yw8nbfbyey]
{
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Body Content */
.error-dialog-content[b-yw8nbfbyey]
{
    margin-bottom: 24px;
}

.error-body-text[b-yw8nbfbyey]
{
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

/* Actions / Buttons */
.error-dialog-actions[b-yw8nbfbyey]
{
    display: flex;
    justify-content: flex-end;
}

.error-btn-refresh[b-yw8nbfbyey]
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Styling ala MudButton Variant="Variant.Filled" Color="Color.Primary" */
    background-color: #594ae2; /* Warna default Primary MudBlazor */
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    /* Typography khas MudBlazor */
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02857em;
    cursor: pointer;
    /* Elevation / Box Shadow khas MudBlazor Filled Button */
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Hover State */
    .error-btn-refresh:hover[b-yw8nbfbyey]
    {
        background-color: #4338ca; /* Sedikit lebih gelap saat di-hover */
        box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
    }

    /* Active / Pressed State */
    .error-btn-refresh:active[b-yw8nbfbyey]
    {
        box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
    }

/* Pastikan Icon SVG mengikuti warna teks (putih) */
.refresh-icon[b-yw8nbfbyey]
{
    width: 18px;
    height: 18px;
    fill: currentColor;
}
/* /Components/Features/Examples/Pages/Index.razor.rz.scp.css */
[b-j002to5qkk] .mud-card
{
    width: 200px !important;
}

[b-j002to5qkk] .border-right-red
{
    border-right: 4px solid red !important;
}

[b-j002to5qkk] .border-right-blue
{
    border-right: 4px solid blue !important;
}

[b-j002to5qkk] .hover-shadow
{
    border-right: 4px solid;
}
/* /Components/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-govqjl0cat],
.components-reconnect-repeated-attempt-visible[b-govqjl0cat],
.components-reconnect-failed-visible[b-govqjl0cat],
.components-pause-visible[b-govqjl0cat],
.components-resume-failed-visible[b-govqjl0cat]
{
    display: none;
}

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

#components-reconnect-modal[b-govqjl0cat]
{
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    width: 30rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.5s, display 0.5s;
    transition-behavior: allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-govqjl0cat 0.5s both;

    &[open]
    {
        animation: components-reconnect-modal-slideUp-b-govqjl0cat 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-govqjl0cat 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

    #components-reconnect-modal[b-govqjl0cat]::backdrop
    {
        background-color: rgba(0, 0, 0, 0.4);
        animation: components-reconnect-modal-fadeInOpacity-b-govqjl0cat 0.5s ease-in-out;
        opacity: 1;
    }

    #components-reconnect-modal[b-govqjl0cat],
    #components-reconnect-modal *[b-govqjl0cat]
    {
        outline: none !important;
        box-shadow: none !important;
    }

@keyframes components-reconnect-modal-slideUp-b-govqjl0cat
{
    0%
    {
        transform: translateY(30px) scale(0.95);
    }

    100%
    {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-govqjl0cat
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

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

    100%
    {
        opacity: 0;
    }
}

.components-reconnect-container[b-govqjl0cat]
{
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

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

.reconnect-progress[b-govqjl0cat]
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    overflow: hidden;
}

.progress-bar[b-govqjl0cat]
{
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #3b82f6 100%);
    background-size: 200% 100%;
    animation: progressMove-b-govqjl0cat 1.5s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes progressMove-b-govqjl0cat
{
    0%
    {
        transform: translateX(-100%);
        background-position: 0% 50%;
    }

    50%
    {
        background-position: 100% 50%;
    }

    100%
    {
        transform: translateX(400%);
        background-position: 0% 50%;
    }
}

/* Icon container */
.reconnect-icon-container[b-govqjl0cat]
{
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnect-icon[b-govqjl0cat],
.reconnect-icon-error[b-govqjl0cat],
.reconnect-icon-pause[b-govqjl0cat]
{
    width: 48px;
    height: 48px;
    color: #3b82f6;
    z-index: 10;
    animation: iconPulse-b-govqjl0cat 2s ease-in-out infinite;
}

.reconnect-icon-error[b-govqjl0cat],
.reconnect-icon-pause[b-govqjl0cat]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon[b-govqjl0cat],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-icon[b-govqjl0cat]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon-error[b-govqjl0cat],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-icon-error[b-govqjl0cat]
{
    display: block;
    color: #ef4444;
    animation: iconShake-b-govqjl0cat 0.5s ease-in-out;
}

#components-reconnect-modal.components-reconnect-paused .reconnect-icon[b-govqjl0cat]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-paused .reconnect-icon-pause[b-govqjl0cat]
{
    display: block;
    color: #f59e0b;
    animation: none;
}

@keyframes iconPulse-b-govqjl0cat
{
    0%, 100%
    {
        transform: scale(1);
    }

    50%
    {
        transform: scale(1.1);
    }
}

@keyframes iconShake-b-govqjl0cat
{
    0%, 100%
    {
        transform: translateX(0);
    }

    20%
    {
        transform: translateX(-8px);
    }

    40%
    {
        transform: translateX(8px);
    }

    60%
    {
        transform: translateX(-4px);
    }

    80%
    {
        transform: translateX(4px);
    }
}

/* Pulse rings */
.reconnect-pulse-ring[b-govqjl0cat]
{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #3b82f6;
    opacity: 0;
    animation: pulseRing-b-govqjl0cat 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

    .reconnect-pulse-ring.delay-1[b-govqjl0cat]
    {
        animation-delay: 0.4s;
    }

    .reconnect-pulse-ring.delay-2[b-govqjl0cat]
    {
        animation-delay: 0.8s;
    }

#components-reconnect-modal.components-reconnect-failed .reconnect-pulse-ring[b-govqjl0cat],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-pulse-ring[b-govqjl0cat],
#components-reconnect-modal.components-reconnect-paused .reconnect-pulse-ring[b-govqjl0cat]
{
    animation: none;
    display: none;
}

@keyframes pulseRing-b-govqjl0cat
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }

    20%
    {
        opacity: 0.8;
    }

    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Content */
.reconnect-content[b-govqjl0cat]
{
    text-align: center;
}

/* Titles */
.reconnect-title[b-govqjl0cat]
{
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}

    .reconnect-title.error[b-govqjl0cat]
    {
        color: #f87171;
    }

    .reconnect-title.warning[b-govqjl0cat]
    {
        color: #fbbf24;
    }

.reconnect-subtitle[b-govqjl0cat]
{
    margin: 0;
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.5;
}

/* Progress */
.reconnect-progress[b-govqjl0cat]
{
    background: #334155;
}

/* Badge */
.countdown-badge[b-govqjl0cat]
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Actions */
.reconnect-actions[b-govqjl0cat]
{
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.btn-primary[b-govqjl0cat]
{
    flex: 1;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

#components-reconnect-modal.components-reconnect-failed .btn-primary.components-reconnect-failed-visible[b-govqjl0cat],
#components-reconnect-modal.components-reconnect-paused .btn-primary.components-pause-visible[b-govqjl0cat]
{
    display: inline-flex;
}

.btn-primary:hover[b-govqjl0cat]
{
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.btn-primary:active[b-govqjl0cat]
{
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}