/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

/* Suppress visible focus ring on h1 when focused programmatically via FocusOnNavigate
   (screen readers still benefit from the focus, sighted users won't see the outline) */
h1:focus {
    outline: none;
}

/* Product description rich HTML styling */
.product-description {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.product-description p {
    margin-bottom: 0.75rem;
}

.product-description ul,
.product-description ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.product-description img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.product-description table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.product-description table td,
.product-description table th {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.5rem;
}
/* ===== Error UI ===== */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--mud-palette-error-dark, #c62828);
    color: #fff;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    font-size: 0.9rem;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
}

#blazor-error-ui a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.blazor-error-dismiss {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

/* ===== Reconnect Modal — Signal Lost HUD ===== */

/* --- State visibility --- */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

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

/* --- Dialog shell --- */
#components-reconnect-modal {
    background: #001a08;
    color: #33cc33;
    border: 2px solid #33cc33;
    border-radius: 3px;
    width: 320px;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 0 30px rgba(51, 204, 51, 0.35), inset 0 0 40px rgba(0, 26, 8, 0.8);
    margin: 20vh auto;
    overflow: hidden;
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: rm-fade-out 0.4s both;
}

#components-reconnect-modal[open] {
    animation: rm-slide-up 0.5s cubic-bezier(.05, .89, .25, 1.02) 0.1s,
               rm-fade-in 0.35s ease-in-out 0.1s;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background: rgba(0, 0, 0, 0.75);
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.08) 3px,
        rgba(0, 0, 0, 0.08) 4px
    );
}

/* --- Header bar --- */
.rm-header {
    background: #33cc33;
    color: #001a08;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.rm-header-status {
    opacity: 0.85;
}

.rm-header-status--error {
    color: #7a0030;
}

/* --- Body --- */
.rm-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 1.5rem 1.25rem;
    gap: 0.9rem;
}

/* --- Radar --- */
.rm-radar {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, #082010 0%, #001208 60%, #000a04 100%);
    border: 2px solid rgba(51, 204, 51, 0.8);
    box-shadow: 0 0 16px rgba(51, 204, 51, 0.45), inset 0 0 24px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    flex-shrink: 0;
}

.rm-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(51, 204, 51, 0.2);
    transform: translate(-50%, -50%);
}
.rm-ring-1 { width: 72px;  height: 72px; }
.rm-ring-2 { width: 120px; height: 120px; }

.rm-crosshair-h,
.rm-crosshair-v {
    position: absolute;
    background: rgba(51, 204, 51, 0.15);
}
.rm-crosshair-h { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.rm-crosshair-v { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }

.rm-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 72%, rgba(51, 204, 51, 0.06) 80%, rgba(51, 204, 51, 0.7) 100%);
    animation: rm-spin 2.5s linear infinite;
    transform-origin: center;
}

/* Pings */
.rm-ping {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3399;
    box-shadow: 0 0 6px 2px rgba(255, 51, 153, 0.7);
    opacity: 0;
}
.rm-ping-1 { top: 20%; left: 60%; animation: rm-ping 2.5s linear infinite; animation-delay: 0.13s; }
.rm-ping-2 { top: 62%; left: 22%; animation: rm-ping 2.5s linear infinite; animation-delay: 1.71s; }
.rm-ping-3 { top: 38%; left: 72%; animation: rm-ping 2.5s linear infinite; animation-delay: 0.43s; }

/* --- Text --- */
.rm-text {
    text-align: center;
    min-height: 1.4rem;
}
.rm-msg {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: #33cc33;
    margin: 0;
    text-shadow: 0 0 8px rgba(51, 204, 51, 0.6);
}
.rm-msg--error {
    color: #ff3399;
    text-shadow: 0 0 8px rgba(255, 51, 153, 0.6);
}
.rm-accent {
    color: #ff3399;
    font-weight: bold;
}
.rm-cursor {
    display: inline-block;
    animation: rm-blink 1s step-end infinite;
    margin-left: 1px;
}

/* --- Actions --- */
.rm-actions {
    display: flex;
    gap: 0.6rem;
    min-height: 0;
}
.rm-btn {
    border: 1px solid #33cc33;
    background: transparent;
    color: #33cc33;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    padding: 6px 18px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(51, 204, 51, 0.6);
    box-shadow: 0 0 8px rgba(51, 204, 51, 0.15);
    transition: background 0.12s, box-shadow 0.12s;
    border-radius: 2px;
}
.rm-btn:hover {
    background: rgba(51, 204, 51, 0.12);
    box-shadow: 0 0 14px rgba(51, 204, 51, 0.35);
}
.rm-btn:active { background: rgba(51, 204, 51, 0.25); }

/* --- State variants --- */

/* Failed: sweep halts + everything goes pink */
#components-reconnect-modal.components-reconnect-failed .rm-sweep,
#components-reconnect-modal.components-reconnect-resume-failed .rm-sweep {
    animation-play-state: paused;
    background: conic-gradient(from 0deg, transparent 72%, rgba(255, 51, 153, 0.06) 80%, rgba(255, 51, 153, 0.65) 100%);
}
#components-reconnect-modal.components-reconnect-failed .rm-radar,
#components-reconnect-modal.components-reconnect-resume-failed .rm-radar {
    border-color: rgba(255, 51, 153, 0.8);
    box-shadow: 0 0 16px rgba(255, 51, 153, 0.4), inset 0 0 24px rgba(0, 0, 0, 0.6);
}
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed {
    border-color: rgba(255, 51, 153, 0.7);
    box-shadow: 0 0 24px rgba(255, 51, 153, 0.3), inset 0 0 40px rgba(0, 26, 8, 0.8);
}
#components-reconnect-modal.components-reconnect-failed .rm-ring,
#components-reconnect-modal.components-reconnect-resume-failed .rm-ring {
    border-color: rgba(255, 51, 153, 0.2);
}
#components-reconnect-modal.components-reconnect-failed .rm-header,
#components-reconnect-modal.components-reconnect-resume-failed .rm-header {
    background: #ff3399;
}
#components-reconnect-modal.components-reconnect-failed .rm-btn,
#components-reconnect-modal.components-reconnect-resume-failed .rm-btn {
    border-color: #ff3399;
    color: #ff3399;
    text-shadow: 0 0 6px rgba(255, 51, 153, 0.6);
    box-shadow: 0 0 8px rgba(255, 51, 153, 0.15);
}
#components-reconnect-modal.components-reconnect-failed .rm-btn:hover,
#components-reconnect-modal.components-reconnect-resume-failed .rm-btn:hover {
    background: rgba(255, 51, 153, 0.12);
    box-shadow: 0 0 14px rgba(255, 51, 153, 0.35);
}

/* --- Keyframes --- */
@keyframes rm-spin  { 100% { transform: rotate(360deg); } }
@keyframes rm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes rm-ping {
    0%   { opacity: 0; transform: scale(0.4); }
    4%   { opacity: 1; transform: scale(1.4); }
    14%  { opacity: 0.9; transform: scale(1); }
    35%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rm-fade-in  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rm-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rm-slide-up {
    0%   { transform: translateY(18px) scale(0.97); }
    100% { transform: translateY(0)    scale(1);    }
}