/* _content/SLYD.Components/Components/Buttons/ActionButton.razor.rz.scp.css */
/* Action Button - Subtle Frosted Glass with White Glow */
.action-btn[b-yocfhpm60g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--slyd-spacing-sm);
    padding: 10px 20px;
    background: var(--slyd-bg-glass);
    border-radius: var(--slyd-radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(255,0%,0%);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--slyd-font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--slyd-transition);
    box-shadow: inset 0 1px 2px hsla(215, 36%, 25%, 0.2);
    white-space: nowrap;
    font-family: var(--slyd-font-family);
    position: relative;
    
}

/* Icon styling */
.action-btn i[b-yocfhpm60g] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--slyd-transition);
}

/* Hover state - white glow */
.action-btn:hover:not(:disabled)[b-yocfhpm60g] {
    background: var(--slyd-bg-glass);
    border-color: hsl(255,0%,20%);
    color: rgba(255, 255, 255, 0.97);
    border-top-color: hsla(225, 0%, 100%, 0.3);
    box-shadow: inset 0 2px 4px hsla(215, 36%, 30%, 0.3);

}

.action-btn:hover:not(:disabled) i[b-yocfhpm60g] {
    color: rgba(255, 255, 255, 0.95);
}

/* Active/pressed state */
.action-btn:active:not(:disabled)[b-yocfhpm60g] {
    background: var(--slyd-bg-mid);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Disabled state */
.action-btn:disabled[b-yocfhpm60g] {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.action-btn:disabled i[b-yocfhpm60g] {
    color: rgba(255, 255, 255, 0.3);
}

/* Size variants */
.action-btn.btn-sm[b-yocfhpm60g] {
    padding: var(--slyd-spacing-xs) 14px;
    font-size: var(--slyd-font-size-sm);
    gap: var(--slyd-spacing-xs);
    border-radius: var(--slyd-radius-sm);
}

.action-btn.btn-sm i[b-yocfhpm60g] {
    font-size: 14px;
}

.action-btn.btn-lg[b-yocfhpm60g] {
    padding: 12px var(--slyd-spacing-lg);
    font-size: var(--slyd-font-size-md);
    gap: 10px;
    border-radius: var(--slyd-radius-lg);
}

.action-btn.btn-lg i[b-yocfhpm60g] {
    font-size: 18px;
}

/* Focus state for accessibility */
.action-btn:focus-visible[b-yocfhpm60g] {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .action-btn[b-yocfhpm60g] {
        padding: var(--slyd-spacing-sm) var(--slyd-spacing-md);
        font-size: var(--slyd-font-size-sm);
    }

    .action-btn i[b-yocfhpm60g] {
        font-size: 14px;
    }

    /* Mobile icon-only mode */
    .action-btn.mobile-icon-only span[b-yocfhpm60g] {
        display: none;
    }

    .action-btn.mobile-icon-only[b-yocfhpm60g] {
        padding: var(--slyd-spacing-sm);
        min-width: 36px;
        justify-content: center;
    }

    .action-btn.mobile-icon-only i[b-yocfhpm60g] {
        margin: 0;
    }
}


/* _content/SLYD.Components/Components/Buttons/DangerButton.razor.rz.scp.css */
/* Danger Button - Subtle Frosted Glass */
.danger-btn[b-39ru41jnw9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    background: var(--slyd-bg-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--slyd-error) 50%, transparent);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    border-radius: var(--slyd-radius-md);
    white-space: nowrap;
    font-family: var(--font-family-primary);
    position: relative;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Icon styling */
.danger-btn i[b-39ru41jnw9] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-normal);
}

/* Hover state - subtle red tint */
.danger-btn:hover:not(:disabled)[b-39ru41jnw9] {
    background: var(--slyd-bg-mid);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 4px 12px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.danger-btn:hover:not(:disabled) i[b-39ru41jnw9] {
    color: rgba(239, 68, 68, 0.9);
}

/* Active/pressed state */
.danger-btn:active:not(:disabled)[b-39ru41jnw9] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Disabled state */
.danger-btn:disabled[b-39ru41jnw9] {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.danger-btn:disabled i[b-39ru41jnw9] {
    color: rgba(255, 255, 255, 0.3);
}

/* Size variants */
.danger-btn.btn-sm[b-39ru41jnw9] {
    padding: var(--spacing-xs) 14px;
    font-size: var(--font-size-sm);
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
}

.danger-btn.btn-sm i[b-39ru41jnw9] {
    font-size: 14px;
}

.danger-btn.btn-lg[b-39ru41jnw9] {
    padding: 12px var(--spacing-lg);
    font-size: var(--font-size-md);
    gap: 10px;
    border-radius: 10px;
}

.danger-btn.btn-lg i[b-39ru41jnw9] {
    font-size: 18px;
}

/* Focus state for accessibility */
.danger-btn:focus-visible[b-39ru41jnw9] {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .danger-btn[b-39ru41jnw9] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .danger-btn i[b-39ru41jnw9] {
        font-size: 14px;
    }

    /* Mobile icon-only mode */
    .danger-btn.mobile-icon-only span[b-39ru41jnw9] {
        display: none;
    }

    .danger-btn.mobile-icon-only[b-39ru41jnw9] {
        padding: var(--spacing-sm);
        min-width: 36px;
        justify-content: center;
    }

    .danger-btn.mobile-icon-only i[b-39ru41jnw9] {
        margin: 0;
    }
}


/* _content/SLYD.Components/Components/Buttons/DarkPerleButton.razor.rz.scp.css */
/* Dark Perle Button Base */
.dark-perle-btn[b-m5oiuy0a7g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--slyd-spacing-sm) var(--slyd-spacing-md);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--slyd-font-size-sm);
    font-weight: var(--slyd-font-weight-medium);
    cursor: pointer;
    transition: var(--slyd-transition);
    border-radius: var(--slyd-radius-md);
    white-space: nowrap;
    font-family: var(--slyd-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Icon styling */
.dark-perle-btn i[b-m5oiuy0a7g] {
    font-size: 16px;
    transition: transform 0.2s ease;
}

/* Hover state */
.dark-perle-btn:hover:not(:disabled)[b-m5oiuy0a7g] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.dark-perle-btn:hover:not(:disabled) i[b-m5oiuy0a7g] {
    transform: translateY(-1px);
}

/* Active state */
.dark-perle-btn.active[b-m5oiuy0a7g] {
    background: linear-gradient(135deg, hsla(186, 94%, 43%, 0.15), hsla(160, 84%, 39%, 0.15));
    color: var(--slyd-text-primary);
    border: 1px solid var(--slyd-border-primary);
}

.dark-perle-btn.active i[b-m5oiuy0a7g] {
    color: var(--slyd-primary-light);
}

/* Disabled state */
.dark-perle-btn:disabled[b-m5oiuy0a7g] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Size variants */
.dark-perle-btn.btn-sm[b-m5oiuy0a7g] {
    padding: 6px 12px;
    font-size: 13px;
    gap: 4px;
}

.dark-perle-btn.btn-sm i[b-m5oiuy0a7g] {
    font-size: 14px;
}

.dark-perle-btn.btn-lg[b-m5oiuy0a7g] {
    padding: 10px 20px;
    font-size: 16px;
    gap: 8px;
}

.dark-perle-btn.btn-lg i[b-m5oiuy0a7g] {
    font-size: 18px;
}

/* Focus state for accessibility */
.dark-perle-btn:focus-visible[b-m5oiuy0a7g] {
    outline: 2px solid var(--slyd-primary-light);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .dark-perle-btn[b-m5oiuy0a7g] {
        padding: 6px 12px;
        font-size: 13px;
    }

    .dark-perle-btn i[b-m5oiuy0a7g] {
        font-size: 14px;
    }

    /* Hide text on mobile, show icon only if space is tight */
    .dark-perle-btn.mobile-icon-only span[b-m5oiuy0a7g] {
        display: none;
    }

    .dark-perle-btn.mobile-icon-only i[b-m5oiuy0a7g] {
        margin: 0;
    }
}
/* _content/SLYD.Components/Components/Buttons/DeployButton.razor.rz.scp.css */
/* Base Animated Button Styles */
.animated-btn[b-936mcnfmth] {
    border: none;
    cursor: pointer;
    transition: all var(--slyd-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slyd-spacing-sm);
    font-weight: var(--slyd-font-weight-medium);
    font-family: var(--slyd-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    width: 100%;
}

.animated-btn:disabled[b-936mcnfmth] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== Variants ==================== */

/* Primary Variant - Gradient with lift animation */
.btn-variant-primary[b-936mcnfmth] {
    background: linear-gradient(135deg, var(--slyd-primary) 0%, var(--slyd-primary-dark) 100%);
    color: var(--slyd-text-primary);
    box-shadow: var(--slyd-shadow-md);
}

.btn-variant-primary:hover:not(:disabled)[b-936mcnfmth] {
    background: linear-gradient(135deg, var(--slyd-primary-light) 0%, var(--slyd-primary) 100%);
    box-shadow: var(--slyd-shadow-glow);
    color: var(--slyd-text-primary);
}

.btn-variant-primary:active:not(:disabled)[b-936mcnfmth] {
    transform: translateY(0);
}

/* Secondary Variant - Transparent with border */
.btn-variant-secondary[b-936mcnfmth] {
    background: transparent;
    color: var(--slyd-text-primary);
    border: 1px solid var(--slyd-border-default);
}

.btn-variant-secondary:hover:not(:disabled)[b-936mcnfmth] {
    background: var(--slyd-primary);
    border-color: var(--slyd-primary-light);
    color: var(--slyd-text-inverse);
}

/* Outline Variant - Subtle with hover effect */
.btn-variant-outline[b-936mcnfmth] {
    background: transparent;
    color: var(--slyd-text-secondary);
    border: 1px solid var(--slyd-border-default);
}

.btn-variant-outline:hover:not(:disabled)[b-936mcnfmth] {
    border-color: var(--slyd-primary);
    color: var(--slyd-primary);
}

/* Details Variant - Like FeaturedAppCard Details button */
.btn-variant-details[b-936mcnfmth] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--slyd-border-subtle);
}

.btn-variant-details:hover:not(:disabled)[b-936mcnfmth] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--slyd-border-hover);
    color: var(--slyd-text-primary);
}

/* ==================== Sizes ==================== */

/* Small */
.btn-size-sm[b-936mcnfmth] {
    padding: 6px 12px;
    font-size: var(--slyd-font-size-sm);
    border-radius: var(--slyd-radius-sm);
}

/* Medium (default) */
.btn-size-md[b-936mcnfmth] {
    padding: 10px 20px;
    font-size: var(--slyd-font-size-base);
    border-radius: var(--slyd-radius-md);
}

/* Large */
.btn-size-lg[b-936mcnfmth] {
    padding: 12px 24px;
    font-size: var(--slyd-font-size-lg);
    border-radius: var(--slyd-radius-lg);
}
/* _content/SLYD.Components/Components/Buttons/DetailsButton.razor.rz.scp.css */
/* Base Details Button Styles */
.details-btn[b-w6c92lhjk1] {
    padding: var(--slyd-spacing-md);
    border-radius: var(--slyd-radius-md);
    font-weight: var(--slyd-font-weight-semibold);
    border: 1px solid var(--slyd-border-default);
    cursor: pointer;
    transition: all var(--slyd-transition);
    background: rgba(255, 255, 255, 0.05);
    color: var(--slyd-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slyd-spacing-sm);
    font-family: var(--slyd-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.details-btn:hover:not(:disabled)[b-w6c92lhjk1] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--slyd-border-hover);
    color: var(--slyd-text-primary);
}

.details-btn:disabled[b-w6c92lhjk1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== Sizes ==================== */

/* Small */
.btn-size-sm[b-w6c92lhjk1] {
    padding: 6px 12px;
    font-size: var(--slyd-font-size-sm);
    border-radius: var(--slyd-radius-sm);
}

/* Medium (default) */
.btn-size-md[b-w6c92lhjk1] {
    padding: 10px 20px;
    font-size: var(--slyd-font-size-base);
    border-radius: var(--slyd-radius-md);
}

/* Large */
.btn-size-lg[b-w6c92lhjk1] {
    padding: 12px 24px;
    font-size: var(--slyd-font-size-lg);
    border-radius: var(--slyd-radius-lg);
}
/* _content/SLYD.Components/Components/Buttons/FloatingActionButton.razor.rz.scp.css */
/* Floating Action Button - Frosted Glass */
.fab[b-zr0ph8b35r] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 1000;
}

/* Icon styling */
.fab i[b-zr0ph8b35r] {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    transition: all var(--transition-normal);
}

/* Hover state */
.fab:hover:not(:disabled)[b-zr0ph8b35r] {
    background: rgba(20, 15, 30, 0.6);
    border-color: rgba(139, 92, 246, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 16px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.fab:hover:not(:disabled) i[b-zr0ph8b35r] {
    color: rgba(139, 92, 246, 0.95);
}

/* Active/pressed state */
.fab:active:not(:disabled)[b-zr0ph8b35r] {
    transform: scale(0.95);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Disabled state */
.fab:disabled[b-zr0ph8b35r] {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.fab:disabled i[b-zr0ph8b35r] {
    color: rgba(255, 255, 255, 0.3);
}

/* Size variants */
.fab.fab-sm[b-zr0ph8b35r] {
    width: 40px;
    height: 40px;
    bottom: 1.5rem;
    right: 1.5rem;
}

.fab.fab-sm i[b-zr0ph8b35r] {
    font-size: 16px;
}

.fab.fab-lg[b-zr0ph8b35r] {
    width: 64px;
    height: 64px;
    bottom: 2.5rem;
    right: 2.5rem;
}

.fab.fab-lg i[b-zr0ph8b35r] {
    font-size: 24px;
}

/* Focus state for accessibility */
.fab:focus-visible[b-zr0ph8b35r] {
    outline: 2px solid rgba(139, 92, 246, 0.6);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fab[b-zr0ph8b35r] {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .fab i[b-zr0ph8b35r] {
        font-size: 18px;
    }

    .fab.fab-sm[b-zr0ph8b35r] {
        width: 36px;
        height: 36px;
        bottom: 1rem;
        right: 1rem;
    }

    .fab.fab-sm i[b-zr0ph8b35r] {
        font-size: 14px;
    }

    .fab.fab-lg[b-zr0ph8b35r] {
        width: 56px;
        height: 56px;
        bottom: 2rem;
        right: 2rem;
    }

    .fab.fab-lg i[b-zr0ph8b35r] {
        font-size: 20px;
    }
}

/* Animation for appearance */
@keyframes fabAppear-b-zr0ph8b35r {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fab[b-zr0ph8b35r] {
    animation: fabAppear-b-zr0ph8b35r 0.3s ease-out;
}
/* _content/SLYD.Components/Components/Buttons/WarningButton.razor.rz.scp.css */
/* Warning Button - Subtle Frosted Glass with Yellow Accent */
.warning-btn[b-35oooztwcg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--slyd-bg-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    border-radius: var(--slyd-radius-md);
    white-space: nowrap;
    font-family: var(--font-family-primary);
    position: relative;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hover state - subtle yellow/amber tint */
.warning-btn:hover:not(:disabled)[b-35oooztwcg] {
    background: var(--slyd-bg-mid);
    border-color: rgba(245, 158, 11, 0.3);
    color: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Active/pressed state */
.warning-btn:active:not(:disabled)[b-35oooztwcg] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Disabled state */
.warning-btn:disabled[b-35oooztwcg] {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

/* Size variants */
.warning-btn.btn-sm[b-35oooztwcg] {
    padding: var(--spacing-xs) 14px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.warning-btn.btn-lg[b-35oooztwcg] {
    padding: 12px var(--spacing-lg);
    font-size: var(--font-size-md);
    border-radius: 10px;
}

/* Focus state for accessibility */
.warning-btn:focus-visible[b-35oooztwcg] {
    outline: 2px solid rgba(245, 158, 11, 0.6);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .warning-btn[b-35oooztwcg] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}


/* _content/SLYD.Components/Components/Cards/AppListCard.razor.rz.scp.css */
/* AppListCard - Horizontal list-style card for apps */

.app-list-card[b-god2p8kxtx],
.app-list-card-link[b-god2p8kxtx] {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-sm, 12px) var(--slyd-spacing-md, 16px);
    display: flex;
    flex-direction: column;
    transition: all var(--slyd-transition, 0.3s ease);
}

.app-list-card-link[b-god2p8kxtx] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.app-list-card:hover[b-god2p8kxtx],
.app-list-card-link:hover[b-god2p8kxtx] {
    border-color: var(--slyd-border-hover, rgba(255, 255, 255, 0.15));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateX(4px);
}

.app-list-card-link:hover .app-name[b-god2p8kxtx] {
    color: var(--slyd-primary, #6366F1);
}

/* Main content row */
.app-list-card-content[b-god2p8kxtx] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-md, 12px);
    width: 100%;
}

/* App Icon Section */
.app-icon[b-god2p8kxtx] {
    width: 40px;
    height: 40px;
    border-radius: var(--slyd-radius-md, 8px);
    overflow: hidden;
    flex-shrink: 0;
}

.app-icon img[b-god2p8kxtx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-placeholder[b-god2p8kxtx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--slyd-radius-md, 8px);
}

.icon-placeholder i[b-god2p8kxtx] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
}

/* App Info Section */
.app-info[b-god2p8kxtx] {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.app-name[b-god2p8kxtx] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    font-weight: var(--slyd-font-weight-medium, 500);
    color: var(--slyd-text, #F8FAFC);
    margin: 0 0 var(--slyd-spacing-xs, 4px) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--slyd-transition, 0.3s ease);
}

.app-description[b-god2p8kxtx] {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    color: var(--slyd-text-secondary, rgba(248, 250, 252, 0.5));
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats Section */
.app-stats[b-god2p8kxtx] {
    display: flex;
    gap: var(--slyd-spacing-md, 12px);
    align-items: center;
    flex-shrink: 0;
}

.stat-item[b-god2p8kxtx] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-xs, 4px);
    font-size: var(--slyd-font-size-xs, 0.6875rem);
    color: var(--slyd-text-tertiary, rgba(248, 250, 252, 0.4));
    white-space: nowrap;
}

.stat-item i[b-god2p8kxtx] {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    color: var(--slyd-primary, #6366F1);
    opacity: 0.7;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .app-list-card[b-god2p8kxtx],
    .app-list-card-link[b-god2p8kxtx] {
        padding: var(--slyd-spacing-xs, 10px) var(--slyd-spacing-sm, 12px);
    }

    .app-list-card-content[b-god2p8kxtx] {
        gap: var(--slyd-spacing-sm, 10px);
    }

    .app-stats[b-god2p8kxtx] {
        display: none;
    }

    .app-icon[b-god2p8kxtx] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 640px) {
    /* Stack content vertically on very small screens */
    .app-list-card-content[b-god2p8kxtx] {
        flex-wrap: wrap;
    }

    .app-info[b-god2p8kxtx] {
        flex: 1 1 100%;
    }
}
/* _content/SLYD.Components/Components/Cards/InstanceListCard.razor.rz.scp.css */
/* InstanceListCard - Horizontal list-style card for instances */

.instance-list-card[b-acyp9s2dqq],
.instance-list-card-link[b-acyp9s2dqq] {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-md, 16px) var(--slyd-spacing-lg, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-sm, 8px);
    transition: all var(--slyd-transition, 0.3s ease);
}

.instance-list-card-link[b-acyp9s2dqq] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.instance-list-card:hover[b-acyp9s2dqq],
.instance-list-card-link:hover[b-acyp9s2dqq] {
    border-color: var(--slyd-border-hover, rgba(255, 255, 255, 0.15));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.instance-list-card-link:hover .instance-name-text[b-acyp9s2dqq] {
    color: var(--slyd-primary, #6366F1);
}

/* Main content row */
.instance-list-card-content[b-acyp9s2dqq] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-lg, 24px);
    width: 100%;
}

/* Instance Name Section */
.instance-name[b-acyp9s2dqq] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-sm, 8px);
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.instance-icon[b-acyp9s2dqq] {
    color: var(--slyd-primary, #6366F1);
    font-size: 1rem;
    flex-shrink: 0;
}

.instance-name-text[b-acyp9s2dqq] {
    font-size: var(--slyd-font-size-base, 1rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    color: var(--slyd-text, #F8FAFC);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Badge Section */
.instance-status[b-acyp9s2dqq] {
    flex-shrink: 0;
}

.status-badge[b-acyp9s2dqq] {
    display: inline-flex;
    align-items: center;
    gap: var(--slyd-spacing-xs, 4px);
    padding: var(--slyd-spacing-xs, 4px) var(--slyd-spacing-sm, 8px);
    border-radius: var(--slyd-radius-full, 9999px);
    font-size: var(--slyd-font-size-xs, 0.75rem);
    font-weight: var(--slyd-font-weight-medium, 500);
    white-space: nowrap;
}

.status-badge i[b-acyp9s2dqq] {
    font-size: 0.5rem;
}

/* Status Badge Colors */
.status-badge.badge-running[b-acyp9s2dqq] {
    background: var(--slyd-success-bg, rgba(34, 197, 94, 0.15));
    color: var(--slyd-success-light, #22C55E);
}

.status-badge.badge-stopped[b-acyp9s2dqq] {
    background: var(--slyd-text-muted-bg, rgba(148, 163, 184, 0.15));
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
}

.status-badge.badge-provisioning[b-acyp9s2dqq] {
    background: var(--slyd-info-bg, rgba(59, 130, 246, 0.15));
    color: var(--slyd-info-light, #3B82F6);
}

.status-badge.badge-error[b-acyp9s2dqq] {
    background: var(--slyd-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--slyd-error-light, #EF4444);
}

.status-badge.badge-neutral[b-acyp9s2dqq] {
    background: var(--slyd-text-muted-bg, rgba(148, 163, 184, 0.15));
    color: var(--slyd-text-secondary, rgba(248, 250, 252, 0.5));
}

/* Price Section */
.instance-price[b-acyp9s2dqq] {
    flex-shrink: 0;
    min-width: 100px;
    text-align: right;
}

.price-value[b-acyp9s2dqq] {
    font-size: var(--slyd-font-size-base, 1rem);
    font-weight: var(--slyd-font-weight-bold, 700);
    font-family: var(--slyd-font-family-mono, 'JetBrains Mono', monospace);
    color: var(--slyd-text, #F8FAFC);
}

/* Endpoint Link Icon */
.instance-link-icon-wrapper[b-acyp9s2dqq] {
    flex-shrink: 0;
}

.instance-link-icon[b-acyp9s2dqq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--slyd-radius-md, 8px);
    background: rgba(99, 102, 241, 0.15);
    color: var(--slyd-primary, #6366F1);
    text-decoration: none;
    transition: all var(--slyd-transition, 0.3s ease);
    flex-shrink: 0;
    cursor: pointer;
}

.instance-link-icon:hover[b-acyp9s2dqq] {
    background: var(--slyd-primary, #6366F1);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.instance-link-icon:active[b-acyp9s2dqq] {
    transform: scale(0.95);
}

.instance-link-icon.disabled[b-acyp9s2dqq] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Progress Bar (for provisioning instances) */
.instance-progress-bar[b-acyp9s2dqq] {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--slyd-radius-full, 9999px);
    overflow: hidden;
}

.instance-progress-bar .progress-fill[b-acyp9s2dqq] {
    height: 100%;
    background: linear-gradient(90deg, var(--slyd-primary, #6366F1), var(--slyd-info-light, #3B82F6));
    transition: width 0.3s ease;
    border-radius: var(--slyd-radius-full, 9999px);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .instance-list-card[b-acyp9s2dqq] {
        padding: var(--slyd-spacing-sm, 8px) var(--slyd-spacing-md, 16px);
    }

    .instance-list-card-content[b-acyp9s2dqq] {
        gap: var(--slyd-spacing-md, 16px);
    }

    .instance-price[b-acyp9s2dqq] {
        min-width: 80px;
    }

    .price-value[b-acyp9s2dqq] {
        font-size: var(--slyd-font-size-sm, 0.875rem);
    }
}

@media (max-width: 640px) {
    /* Stack content vertically on very small screens */
    .instance-list-card-content[b-acyp9s2dqq] {
        flex-wrap: wrap;
        gap: var(--slyd-spacing-sm, 8px);
    }

    .instance-name[b-acyp9s2dqq] {
        flex: 1 1 100%;
    }

    .instance-status[b-acyp9s2dqq] {
        flex: 1;
    }

    .instance-price[b-acyp9s2dqq] {
        flex: 1;
        text-align: left;
    }
}
/* _content/SLYD.Components/Components/Charts/ChartCard.razor.rz.scp.css */
/* ChartCard Component Styles */
.chart-card[b-3h6jb0ha7h] {
    background: var(--slyd-card-bg-frosted-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-lg, 24px);
    margin-bottom: var(--slyd-spacing-lg, 20px);
    transition: all var(--slyd-transition, 0.3s ease);
}



/* Header */
.chart-card-header[b-3h6jb0ha7h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--slyd-spacing-md, 16px);
    gap: var(--slyd-spacing-md, 16px);
}

.chart-card-title-section[b-3h6jb0ha7h] {
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-xs, 4px);
}

.chart-card-title[b-3h6jb0ha7h] {
    font-size: var(--slyd-font-size-lg, 1.25rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    color: var(--slyd-text, #F8FAFC);
    margin: 0;
    font-family: var(--slyd-font-family, 'Inter', sans-serif);
}

.chart-card-subtitle[b-3h6jb0ha7h] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
}

/* Navigation */
.chart-card-navigation[b-3h6jb0ha7h] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-sm, 8px);
}

/* Body - Chart Area */
.chart-card-body[b-3h6jb0ha7h] {
    position: relative;
    width: 100%;
}

.chart-card-body canvas[b-3h6jb0ha7h] {
    width: 100% !important;
    height: 100% !important;
}

/* Footer */
.chart-card-footer[b-3h6jb0ha7h] {
    margin-top: var(--slyd-spacing-md, 16px);
    padding-top: var(--slyd-spacing-md, 16px);
    border-top: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
}

/* Responsive */
@media (max-width: 768px) {
    .chart-card[b-3h6jb0ha7h] {
        padding: var(--slyd-spacing-md, 16px);
    }

    .chart-card-header[b-3h6jb0ha7h] {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-card-navigation[b-3h6jb0ha7h] {
        width: 100%;
        justify-content: space-between;
    }

    .chart-card-title[b-3h6jb0ha7h] {
        font-size: var(--slyd-font-size-md, 1.125rem);
    }
}
/* _content/SLYD.Components/Components/Charts/EarningsChart.razor.rz.scp.css */
/* EarningsChart Component Styles - Matches DataCardGrid */

/* Container */
.earnings-chart-container[b-po9wz5c0gz] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Container with background - matches DataCardGrid styling */
.earnings-chart-container.has-background[b-po9wz5c0gz] {
    background: var(--slyd-card-bg-frosted-glass);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-lg, 24px);
}

/* Header section - matches DataCardGrid header */
.earnings-chart-header[b-po9wz5c0gz] {
    margin-bottom: var(--slyd-spacing-lg, 24px);
}

.earnings-chart-title[b-po9wz5c0gz] {
    font-size: var(--slyd-font-size-xl, 1.25rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    color: var(--slyd-text, #F8FAFC);
    margin: 0;
    font-family: var(--slyd-font-family, 'Inter', sans-serif);
}

.earnings-chart-subtitle[b-po9wz5c0gz] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
    margin: var(--slyd-spacing-xs, 4px) 0 0 0;
}

/* Chart body */
.earnings-chart-body[b-po9wz5c0gz] {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.earnings-chart-body canvas[b-po9wz5c0gz] {
    width: 100% !important;
    max-height: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .earnings-chart-container.has-background[b-po9wz5c0gz] {
        padding: var(--slyd-spacing-md, 16px);
    }

    .earnings-chart-title[b-po9wz5c0gz] {
        font-size: var(--slyd-font-size-lg, 1.125rem);
    }

    .earnings-chart-body[b-po9wz5c0gz] {
        height: 300px !important;
    }
}

@media (max-width: 480px) {
    .earnings-chart-container.has-background[b-po9wz5c0gz] {
        padding: var(--slyd-spacing-sm, 12px);
    }

    .earnings-chart-body[b-po9wz5c0gz] {
        height: 250px !important;
    }
}
/* _content/SLYD.Components/Components/Charts/TimeNavigator.razor.rz.scp.css */
/* TimeNavigator Component Styles */
.time-navigator[b-1sd0qkv6jx] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-sm, 8px);
}

/* Navigation Buttons */
.nav-btn[b-1sd0qkv6jx] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--slyd-radius-md, 8px);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all var(--slyd-transition, 0.2s ease);
}

.nav-btn:hover:not(:disabled)[b-1sd0qkv6jx] {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.nav-btn:disabled[b-1sd0qkv6jx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nav-btn i[b-1sd0qkv6jx] {
    font-size: 12px;
}

/* Dropdown */
.nav-dropdown[b-1sd0qkv6jx] {
    position: relative;
    min-width: 120px;
}

.nav-dropdown-toggle[b-1sd0qkv6jx] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--slyd-spacing-sm, 8px);
    padding: var(--slyd-spacing-sm, 8px) var(--slyd-spacing-md, 12px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--slyd-radius-md, 8px);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--slyd-font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all var(--slyd-transition, 0.2s ease);
}

.nav-dropdown-toggle:hover[b-1sd0qkv6jx] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.nav-dropdown-toggle i[b-1sd0qkv6jx] {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.nav-dropdown-toggle i.rotated[b-1sd0qkv6jx] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-dropdown-menu[b-1sd0qkv6jx] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--slyd-radius-md, 8px);
    padding: var(--slyd-spacing-xs, 4px);
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.nav-dropdown-item[b-1sd0qkv6jx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-sm, 8px);
    padding: var(--slyd-spacing-sm, 8px) var(--slyd-spacing-md, 12px);
    background: transparent;
    border: none;
    border-radius: var(--slyd-radius-sm, 6px);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--slyd-font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.nav-dropdown-item:hover[b-1sd0qkv6jx] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.nav-dropdown-item.active[b-1sd0qkv6jx] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--slyd-primary, #6366F1);
}

.nav-dropdown-item i[b-1sd0qkv6jx] {
    font-size: 10px;
    width: 14px;
}

/* Backdrop for closing dropdown */
.nav-dropdown-backdrop[b-1sd0qkv6jx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

/* Responsive */
@media (max-width: 576px) {
    .nav-dropdown[b-1sd0qkv6jx] {
        min-width: 100px;
    }

    .nav-dropdown-toggle[b-1sd0qkv6jx] {
        padding: var(--slyd-spacing-xs, 6px) var(--slyd-spacing-sm, 10px);
        font-size: var(--slyd-font-size-xs, 0.75rem);
    }
}
/* _content/SLYD.Components/Components/Common/Badge.razor.rz.scp.css */
/* Badge - Status indicator component */
.badge[b-1sipkj2s9h] {
    display: inline-block;
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    white-space: nowrap;
    vertical-align: middle;
}

/* Small variant */
.badge-sm[b-1sipkj2s9h] {
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
}

/* Beta - Orange */
.badge-beta[b-1sipkj2s9h] {
    background-color: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #FB923C;
}

/* Alpha - Purple */
.badge-alpha[b-1sipkj2s9h] {
    background-color: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #8B5CF6;
}

/* Preview - Pink */
.badge-preview[b-1sipkj2s9h] {
    background-color: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #EC4899;
}

/* New - Green */
.badge-new[b-1sipkj2s9h] {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10B981;
}

/* Version - Green */
.badge-version[b-1sipkj2s9h] {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10B981;
}

/* Coming Soon - Gray */
.badge-coming-soon[b-1sipkj2s9h] {
    background-color: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94A3B8;
}

/* Info - Blue */
.badge-info[b-1sipkj2s9h] {
    background-color: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #6366F1;
}

/* Warning - Yellow/Orange */
.badge-warning[b-1sipkj2s9h] {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

/* Success - Green */
.badge-success[b-1sipkj2s9h] {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E;
}

/* Error - Red */
.badge-error[b-1sipkj2s9h] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
}
/* _content/SLYD.Components/Components/Common/ConfirmationModal.razor.rz.scp.css */
.confirmation-modal-backdrop[b-7vo4u69tsg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.7));
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-7vo4u69tsg 0.2s ease-in-out;
}

@keyframes fadeIn-b-7vo4u69tsg {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.confirmation-modal[b-7vo4u69tsg] {
    background: var(--modal-bg, linear-gradient(145deg, #1e1e2e 0%, #2a2a3e 100%));
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-7vo4u69tsg 0.3s ease-out;
    border: 1px solid var(--modal-border-color, rgba(255, 255, 255, 0.1));
}

@keyframes slideUp-b-7vo4u69tsg {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.confirmation-modal-header[b-7vo4u69tsg] {
    padding: 24px;
    border-bottom: 1px solid var(--modal-border-color, rgba(255, 255, 255, 0.1));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confirmation-modal-title[b-7vo4u69tsg] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--modal-title-color, #ffffff);
    display: flex;
    align-items: center;
    gap: 10px;
}

.confirmation-modal-title i[b-7vo4u69tsg] {
    font-size: 24px;
}

.confirmation-modal-close[b-7vo4u69tsg] {
    background: transparent;
    border: none;
    color: var(--modal-close-color, #9ca3af);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.confirmation-modal-close:hover[b-7vo4u69tsg] {
    color: var(--modal-close-hover-color, #ffffff);
    background: rgba(255, 255, 255, 0.1);
}

.confirmation-modal-body[b-7vo4u69tsg] {
    padding: 24px;
    color: var(--modal-body-color, #d1d5db);
    line-height: 1.6;
}

.confirmation-modal-body p[b-7vo4u69tsg] {
    margin: 0 0 12px 0;
}

.confirmation-modal-body p:last-child[b-7vo4u69tsg] {
    margin-bottom: 0;
}

.confirmation-modal-footer[b-7vo4u69tsg] {
    padding: 20px 24px;
    border-top: 1px solid var(--modal-border-color, rgba(255, 255, 255, 0.1));
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirmation-modal-footer .btn[b-7vo4u69tsg] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.confirmation-modal-footer .btn-secondary[b-7vo4u69tsg] {
    background: var(--btn-secondary-bg, rgba(255, 255, 255, 0.1));
    color: var(--btn-secondary-color, #ffffff);
}

.confirmation-modal-footer .btn-secondary:hover[b-7vo4u69tsg] {
    background: var(--btn-secondary-hover-bg, rgba(255, 255, 255, 0.15));
}

.confirmation-modal-footer .btn-primary[b-7vo4u69tsg] {
    background: var(--btn-primary-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: var(--btn-primary-color, #ffffff);
}

.confirmation-modal-footer .btn-primary:hover[b-7vo4u69tsg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.confirmation-modal-footer .btn-danger[b-7vo4u69tsg] {
    background: var(--btn-danger-bg, linear-gradient(135deg, #f87171 0%, #dc2626 100%));
    color: var(--btn-danger-color, #ffffff);
}

.confirmation-modal-footer .btn-danger:hover[b-7vo4u69tsg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.4);
}

.confirmation-modal-footer .btn-warning[b-7vo4u69tsg] {
    background: var(--btn-warning-bg, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
    color: var(--btn-warning-color, #1f2937);
}

.confirmation-modal-footer .btn-warning:hover[b-7vo4u69tsg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

/* Alert styles for content */
.confirmation-modal-body .alert[b-7vo4u69tsg] {
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.confirmation-modal-body .alert i[b-7vo4u69tsg] {
    font-size: 20px;
    margin-top: 2px;
}

.confirmation-modal-body .alert-danger[b-7vo4u69tsg] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.confirmation-modal-body .alert-warning[b-7vo4u69tsg] {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fcd34d;
}

.confirmation-modal-body .alert-info[b-7vo4u69tsg] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

@media (max-width: 768px) {
    .confirmation-modal[b-7vo4u69tsg] {
        max-width: 95%;
        margin: 20px;
    }

    .confirmation-modal-header[b-7vo4u69tsg] {
        padding: 20px;
    }

    .confirmation-modal-body[b-7vo4u69tsg] {
        padding: 20px;
    }

    .confirmation-modal-footer[b-7vo4u69tsg] {
        padding: 16px 20px;
        flex-direction: column-reverse;
    }

    .confirmation-modal-footer .btn[b-7vo4u69tsg] {
        width: 100%;
    }
}
/* _content/SLYD.Components/Components/Common/ProgressBar.razor.rz.scp.css */
.progress-container[b-yneuwu6ki9] {
    margin-bottom: 16px;
}

.progress-track[b-yneuwu6ki9] {
    height: var(--progress-height, 6px);
    background-color: var(--progress-track-color, rgba(255, 255, 255, 0.1));
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-yneuwu6ki9] {
    height: 100%;
    background: var(--progress-gradient, linear-gradient(90deg, var(--primary, #8b5cf6), var(--secondary, #06b6d4)));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-bar-warning[b-yneuwu6ki9] {
    background: var(--progress-warning-gradient, linear-gradient(90deg, var(--warning, #f59e0b), #fdba74));
}

.progress-bar-danger[b-yneuwu6ki9] {
    background: var(--progress-danger-gradient, linear-gradient(90deg, var(--danger, #ef4444), #fca5a5));
}

.progress-text[b-yneuwu6ki9] {
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 0;
    color: var(--progress-text-color, currentColor);
}

.progress-status[b-yneuwu6ki9] {
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 0;
    color: var(--progress-status-color, var(--muted, rgba(255, 255, 255, 0.7)));
}
/* _content/SLYD.Components/Components/Common/ServerCard.razor.rz.scp.css */
.server-card[b-4yyt7ume2y] {
    background: var(--server-card-bg, #1a1f3a);
    border: 1px solid var(--server-card-border, #233554);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.server-card:hover[b-4yyt7ume2y] {
    border-color: var(--server-card-hover-border, var(--primary, #64ffda));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--server-card-hover-shadow, rgba(100, 255, 218, 0.1));
}

.card-header[b-4yyt7ume2y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.card-header-info[b-4yyt7ume2y] {
    flex: 1;
}

.server-id[b-4yyt7ume2y] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--server-card-title-color, #e6f1ff);
    margin-bottom: 0.25rem;
}

.server-status[b-4yyt7ume2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--server-card-muted-color, #a8b2d1);
}

.status-indicator[b-4yyt7ume2y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--server-card-muted-color, #a8b2d1);
}

.status-indicator.available[b-4yyt7ume2y] {
    background: var(--status-available, #64ffda);
}

.status-indicator.busy[b-4yyt7ume2y] {
    background: var(--status-busy, #ffa500);
}

.status-indicator.offline[b-4yyt7ume2y] {
    background: var(--status-offline, #ff6b6b);
}

.score-badge[b-4yyt7ume2y] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.score-badge.perfect[b-4yyt7ume2y] {
    background: rgba(100, 255, 218, 0.2);
    color: var(--score-perfect, #64ffda);
}

.score-badge.excellent[b-4yyt7ume2y] {
    background: rgba(46, 213, 115, 0.2);
    color: var(--score-excellent, #2ed573);
}

.score-badge.good[b-4yyt7ume2y] {
    background: rgba(255, 221, 87, 0.2);
    color: var(--score-good, #ffdd57);
}

.score-badge.fair[b-4yyt7ume2y] {
    background: rgba(255, 165, 0, 0.2);
    color: var(--score-fair, #ffa500);
}

.score-badge.poor[b-4yyt7ume2y] {
    background: rgba(255, 107, 107, 0.2);
    color: var(--score-poor, #ff6b6b);
}

.config-info[b-4yyt7ume2y] {
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(100, 255, 218, 0.05);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--server-card-config-color, var(--primary, #64ffda));
}

.gpu-section[b-4yyt7ume2y] {
    margin-bottom: 0.75rem;
}

.gpu-model[b-4yyt7ume2y] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--server-card-title-color, #e6f1ff);
    margin-bottom: 0.25rem;
}

.gpu-details[b-4yyt7ume2y] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--server-card-muted-color, #a8b2d1);
}

.specs-grid[b-4yyt7ume2y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.spec-item[b-4yyt7ume2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--server-card-muted-color, #a8b2d1);
}

.spec-item i[b-4yyt7ume2y] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Animation for card appearance */
.server-card[b-4yyt7ume2y] {
    animation: fadeInUp-b-4yyt7ume2y 0.3s ease-out;
}

@keyframes fadeInUp-b-4yyt7ume2y {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .server-card[b-4yyt7ume2y] {
        padding: 0.75rem;
    }

    .specs-grid[b-4yyt7ume2y] {
        grid-template-columns: 1fr;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .server-card[b-4yyt7ume2y] {
        border-width: 2px;
    }

    .score-badge[b-4yyt7ume2y] {
        font-weight: 700;
    }
}
/* _content/SLYD.Components/Components/Common/Spinner.razor.rz.scp.css */
.spinner-overlay[b-xv7hxnajvm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--spinner-overlay-bg, rgba(0, 0, 0, 0.3));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner-inline[b-xv7hxnajvm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner[b-xv7hxnajvm] {
    border: 4px solid var(--spinner-track-color, rgba(255, 255, 255, 0.1));
    border-top: 4px solid var(--spinner-color, var(--primary, #8b5cf6));
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-xv7hxnajvm 1s linear infinite;
}

.spinner-small[b-xv7hxnajvm] {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.spinner-large[b-xv7hxnajvm] {
    width: 60px;
    height: 60px;
    border-width: 5px;
}

.spinner-text[b-xv7hxnajvm] {
    margin-top: 16px;
    color: var(--spinner-text-color, rgba(255, 255, 255, 0.7));
    font-size: 16px;
}

@keyframes spin-b-xv7hxnajvm {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* _content/SLYD.Components/Components/Common/StatusPill.razor.rz.scp.css */
/* Status Pill - Matte steel background with glowing status indicator */
.status-pill[b-x9qxry6qnm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 600;
    background: #3f4b59;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

/* Status indicator - glowing circle */
.status-indicator[b-x9qxry6qnm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

/* Pulsing glow animation */
@keyframes pulse-glow-b-x9qxry6qnm {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

.status-indicator[b-x9qxry6qnm]::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    opacity: 0.8;
    animation: pulse-glow-b-x9qxry6qnm 2s ease-in-out infinite;
    filter: blur(4px);
}

/* Available status - green */
.status-available .status-indicator[b-x9qxry6qnm] {
    background: #22c55e;
    box-shadow:
        0 0 12px rgba(34, 197, 94, 0.9),
        0 0 20px rgba(34, 197, 94, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.status-available .status-indicator[b-x9qxry6qnm]::before {
    background: radial-gradient(circle, rgba(34, 197, 94, 1) 0%, rgba(34, 197, 94, 0.6) 40%, transparent 70%);
}

/* Busy status - yellow */
.status-busy .status-indicator[b-x9qxry6qnm] {
    background: #eab308;
    box-shadow:
        0 0 12px rgba(234, 179, 8, 0.9),
        0 0 20px rgba(234, 179, 8, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.status-busy .status-indicator[b-x9qxry6qnm]::before {
    background: radial-gradient(circle, rgba(234, 179, 8, 1) 0%, rgba(234, 179, 8, 0.6) 40%, transparent 70%);
}

/* Offline status - red */
.status-offline .status-indicator[b-x9qxry6qnm] {
    background: #ef4444;
    box-shadow:
        0 0 12px rgba(239, 68, 68, 0.9),
        0 0 20px rgba(239, 68, 68, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.status-offline .status-indicator[b-x9qxry6qnm]::before {
    background: radial-gradient(circle, rgba(239, 68, 68, 1) 0%, rgba(239, 68, 68, 0.6) 40%, transparent 70%);
}

/* Warning status - orange */
.status-warning .status-indicator[b-x9qxry6qnm] {
    background: #f97316;
    box-shadow:
        0 0 12px rgba(249, 115, 22, 0.9),
        0 0 20px rgba(249, 115, 22, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.status-warning .status-indicator[b-x9qxry6qnm]::before {
    background: radial-gradient(circle, rgba(249, 115, 22, 1) 0%, rgba(249, 115, 22, 0.6) 40%, transparent 70%);
}

/* Error status - dark red */
.status-error .status-indicator[b-x9qxry6qnm] {
    background: #dc2626;
    box-shadow:
        0 0 12px rgba(220, 38, 38, 0.9),
        0 0 20px rgba(220, 38, 38, 0.5),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.status-error .status-indicator[b-x9qxry6qnm]::before {
    background: radial-gradient(circle, rgba(220, 38, 38, 1) 0%, rgba(220, 38, 38, 0.6) 40%, transparent 70%);
}

/* Size variants */
.status-pill.size-sm[b-x9qxry6qnm] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.375rem;
    border-radius: 12px;
}

.status-pill.size-sm .status-indicator[b-x9qxry6qnm] {
    width: 6px;
    height: 6px;
}

.status-pill.size-lg[b-x9qxry6qnm] {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    gap: 0.625rem;
    border-radius: 20px;
}

.status-pill.size-lg .status-indicator[b-x9qxry6qnm] {
    width: 10px;
    height: 10px;
}

/* _content/SLYD.Components/Components/Common/TabNavigation.razor.rz.scp.css */
.tab-nav[b-qijw8yh304] {
    display: flex;
    background: var(--tab-nav-bg, rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--tab-nav-radius, 12px);
    padding: 4px;
    margin-bottom: var(--tab-nav-margin-bottom, 24px);
    border: 1px solid var(--tab-nav-border-color, rgba(255, 255, 255, 0.08));
}

.tab-item[b-qijw8yh304] {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--tab-item-color, inherit);
}

.tab-item.active[b-qijw8yh304] {
    background: var(--tab-item-active-bg, rgba(99, 102, 241, 0.15));
    color: var(--tab-item-active-color, var(--primary, #8b5cf6));
}

.tab-item:hover:not(.active)[b-qijw8yh304] {
    background: var(--tab-item-hover-bg, rgba(255, 255, 255, 0.05));
}
/* _content/SLYD.Components/Components/Common/ToastNotifications.razor.rz.scp.css */
.toast-container[b-mu8jsbn1h8] {
    position: fixed;
    top: var(--toast-top, 20px);
    right: var(--toast-right, 20px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: var(--toast-width, 350px);
    max-width: 90%;
}

.toast-notification[b-mu8jsbn1h8] {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight-b-mu8jsbn1h8 0.3s ease-out;
    opacity: 0.97;
    overflow: hidden;
    background: var(--toast-bg, rgba(15, 23, 42, 0.95));
    border-left: 4px solid;
}

.toast-notification.success[b-mu8jsbn1h8] {
    border-color: var(--toast-success-color, #10B981);
}

.toast-notification.error[b-mu8jsbn1h8] {
    border-color: var(--toast-error-color, #ef4444);
}

.toast-notification.info[b-mu8jsbn1h8] {
    border-color: var(--toast-info-color, #06B6D4);
}

.toast-notification.warning[b-mu8jsbn1h8] {
    border-color: var(--toast-warning-color, #f59e0b);
}

.toast-icon[b-mu8jsbn1h8] {
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 20px;
    padding-top: 2px;
}

.toast-notification.success .toast-icon[b-mu8jsbn1h8] {
    color: var(--toast-success-color, #10B981);
}

.toast-notification.error .toast-icon[b-mu8jsbn1h8] {
    color: var(--toast-error-color, #ef4444);
}

.toast-notification.info .toast-icon[b-mu8jsbn1h8] {
    color: var(--toast-info-color, #06B6D4);
}

.toast-notification.warning .toast-icon[b-mu8jsbn1h8] {
    color: var(--toast-warning-color, #f59e0b);
}

.toast-content[b-mu8jsbn1h8] {
    flex: 1;
}

.toast-title[b-mu8jsbn1h8] {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
    color: var(--toast-title-color, #ffffff);
}

.toast-message[b-mu8jsbn1h8] {
    font-size: 14px;
    color: var(--toast-message-color, rgba(255, 255, 255, 0.7));
}

.toast-close[b-mu8jsbn1h8] {
    background: none;
    border: none;
    color: var(--toast-close-color, rgba(255, 255, 255, 0.5));
    cursor: pointer;
    padding: 4px;
    margin-left: 12px;
    font-size: 14px;
    align-self: flex-start;
    transition: color 0.2s;
}

.toast-close:hover[b-mu8jsbn1h8] {
    color: var(--toast-close-hover-color, white);
}

.toast-notification.removing[b-mu8jsbn1h8] {
    animation: slideOutRight-b-mu8jsbn1h8 0.5s ease-in forwards;
}

@keyframes slideInRight-b-mu8jsbn1h8 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 0.97;
    }
}

@keyframes slideOutRight-b-mu8jsbn1h8 {
    from {
        transform: translateX(0);
        opacity: 0.97;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}
/* _content/SLYD.Components/Components/Common/ViewToggle.razor.rz.scp.css */
.view-toggle-container[b-s0mzy3s310] {
    display: flex;
    background-color: var(--toggle-bg, rgba(30, 30, 40, 0.8));
    border-radius: var(--toggle-radius, 0);
    padding: 2px;
    margin: var(--toggle-margin, 0 0 16px 0);
    border-top: none;
    border-bottom: 1px solid var(--toggle-border-color, rgba(255, 255, 255, 0.1));
    border-left: none;
    border-right: none;
    width: 100%;
}

.view-toggle-button[b-s0mzy3s310] {
    flex: 1 1 0;
    padding: 8px 16px;
    background: transparent;
    color: var(--toggle-text-color, rgba(255, 255, 255, 0.7));
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.view-toggle-button:hover[b-s0mzy3s310] {
    color: var(--toggle-hover-color, rgba(255, 255, 255, 0.9));
}

.view-toggle-button.active[b-s0mzy3s310] {
    background-color: var(--toggle-active-bg, rgba(70, 70, 220, 0.6));
    color: var(--toggle-active-color, white);
}

.view-toggle-button i[b-s0mzy3s310] {
    font-size: 14px;
}

.view-toggle-button span[b-s0mzy3s310] {
    font-size: 14px;
    font-weight: 500;
}
/* _content/SLYD.Components/Components/Compute/ComputeCard.razor.rz.scp.css */
.compute-card[b-don6j53mhy] {
    background: var(--compute-card-bg, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--compute-card-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.compute-card:hover[b-don6j53mhy] {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border-color: var(--compute-card-hover-border, rgba(99, 102, 241, 0.3));
}

/* Card States */
.compute-card.unavailable[b-don6j53mhy] {
    opacity: 0.6;
    background: var(--compute-card-unavailable-bg, rgba(15, 23, 42, 0.3));
}

.compute-card.rented[b-don6j53mhy] {
    border-left: 4px solid var(--compute-card-rented-color, #ffc107);
}

.compute-card.paused[b-don6j53mhy] {
    border-left: 4px solid var(--compute-card-paused-color, #6c757d);
}

.compute-card.available[b-don6j53mhy] {
    border-left: 4px solid var(--compute-card-available-color, #28a745);
}

/* Header */
.card-header[b-don6j53mhy] {
    padding: 1.25rem;
    background: var(--compute-card-header-bg, linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%));
    color: white;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tier Badge */
.tier-badge[b-don6j53mhy] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 1;
}

.tier-badge.tier-1[b-don6j53mhy] {
    background: var(--compute-tier1-bg, #6c757d);
    color: white;
}

.tier-badge.tier-2[b-don6j53mhy] {
    background: var(--compute-tier2-bg, #17a2b8);
    color: white;
}

.tier-badge.tier-3[b-don6j53mhy] {
    background: var(--compute-tier3-bg, #ffc107);
    color: #1a1a1a;
}

.tier-badge.tier-4[b-don6j53mhy] {
    background: var(--compute-tier4-bg, #28a745);
    color: white;
}

/* Availability Badge */
.card-badge[b-don6j53mhy] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1;
}

.badge-available[b-don6j53mhy] {
    background: var(--compute-badge-available-bg, #28a745);
    color: white;
}

.badge-unavailable[b-don6j53mhy] {
    background: var(--compute-badge-unavailable-bg, #dc3545);
    color: white;
}

.badge-rented[b-don6j53mhy] {
    background: var(--compute-badge-rented-bg, #ffc107);
    color: #1a1a1a;
}

/* Title Area */
.card-title-area[b-don6j53mhy] {
    margin-top: 2rem;
}

.card-title[b-don6j53mhy] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
}

.card-subtitle[b-don6j53mhy] {
    font-size: 0.875rem;
    opacity: 0.8;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

/* Price Tag */
.card-price-tag[b-don6j53mhy] {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: var(--compute-price-bg, rgba(99, 102, 241, 0.3));
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    border: 1px solid var(--compute-price-border, rgba(99, 102, 241, 0.4));
}

/* Body */
.card-body[b-don6j53mhy] {
    padding: 1.25rem;
}

.specs-container[b-don6j53mhy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.specs-row[b-don6j53mhy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.spec-tag[b-don6j53mhy] {
    background: var(--compute-spec-bg, rgba(99, 102, 241, 0.2));
    color: var(--compute-spec-color, rgba(255, 255, 255, 0.9));
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--compute-spec-border, rgba(99, 102, 241, 0.3));
}

/* Capacity Info (Tier 2+) */
.capacity-info[b-don6j53mhy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--compute-capacity-bg, rgba(99, 102, 241, 0.1));
    border-radius: 6px;
    border-left: 3px solid var(--compute-capacity-border, #6366f1);
}

.capacity-available[b-don6j53mhy] {
    font-weight: 600;
    color: var(--compute-capacity-available-color, #4ade80);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.last-synced[b-don6j53mhy] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Location */
.location-info[b-don6j53mhy] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Certifications */
.certifications[b-don6j53mhy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cert-badge[b-don6j53mhy] {
    background: var(--compute-cert-bg, #28a745);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Footer */
.card-footer[b-don6j53mhy] {
    padding: 1rem 1.25rem;
    background: var(--compute-footer-bg, rgba(15, 23, 42, 0.4));
    display: flex;
    gap: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-deploy[b-don6j53mhy],
.btn-details[b-don6j53mhy] {
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-deploy[b-don6j53mhy] {
    background: var(--compute-btn-deploy-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: white;
}

.btn-deploy:hover:not(:disabled)[b-don6j53mhy] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-deploy:disabled[b-don6j53mhy] {
    background: rgba(108, 117, 125, 0.5);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-details[b-don6j53mhy] {
    background: var(--compute-btn-details-bg, rgba(15, 23, 42, 0.6));
    color: var(--compute-btn-details-color, #667eea);
    border: 2px solid var(--compute-btn-details-border, #667eea);
}

.btn-details:hover[b-don6j53mhy] {
    background: var(--compute-btn-details-hover-bg, #667eea);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .card-header[b-don6j53mhy] {
        padding: 1rem;
    }

    .card-body[b-don6j53mhy] {
        padding: 1rem;
    }

    .card-title[b-don6j53mhy] {
        font-size: 1.125rem;
    }

    .card-price-tag[b-don6j53mhy] {
        font-size: 1.125rem;
        padding: 0.375rem 0.75rem;
    }
}
/* _content/SLYD.Components/Components/DataGrid/DataGrid.razor.rz.scp.css */
/* DataGrid Container */
.slyd-datagrid-container[b-um5i2ljtxu] {
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 2px 4px -2px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.slyd-datagrid-wrapper[b-um5i2ljtxu] {
    overflow-x: auto;
}

/* Table Styling */
.slyd-datagrid[b-um5i2ljtxu] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.slyd-datagrid thead th[b-um5i2ljtxu] {
    background: rgba(15, 23, 42, 0.8);
    color: rgba(248, 250, 252, 0.7);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.slyd-datagrid thead th:first-child[b-um5i2ljtxu] {
    border-top-left-radius: 16px;
}

.slyd-datagrid thead th:last-child[b-um5i2ljtxu] {
    border-top-right-radius: 16px;
}

/* Sortable Headers */
.slyd-datagrid thead th.slyd-datagrid-sortable[b-um5i2ljtxu] {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.slyd-datagrid thead th.slyd-datagrid-sortable:hover[b-um5i2ljtxu] {
    background: rgba(30, 41, 59, 0.9);
    color: #F8FAFC;
}

.slyd-datagrid thead th.slyd-datagrid-sorted[b-um5i2ljtxu] {
    background: rgba(30, 41, 59, 0.95);
    color: #60A5FA;
}

.slyd-datagrid-header-content[b-um5i2ljtxu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.slyd-datagrid thead th.text-left .slyd-datagrid-header-content[b-um5i2ljtxu] {
    justify-content: flex-start;
}

.slyd-datagrid thead th.text-center .slyd-datagrid-header-content[b-um5i2ljtxu] {
    justify-content: center;
}

.slyd-datagrid thead th.text-right .slyd-datagrid-header-content[b-um5i2ljtxu] {
    justify-content: flex-end;
}

.slyd-datagrid-sort-icon[b-um5i2ljtxu] {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.slyd-datagrid thead th.slyd-datagrid-sortable:hover .slyd-datagrid-sort-icon[b-um5i2ljtxu] {
    opacity: 0.8;
}

.slyd-datagrid thead th.slyd-datagrid-sorted .slyd-datagrid-sort-icon[b-um5i2ljtxu] {
    opacity: 1;
    color: #60A5FA;
}

.slyd-datagrid thead th.text-left[b-um5i2ljtxu] {
    text-align: left;
}

.slyd-datagrid thead th.text-center[b-um5i2ljtxu] {
    text-align: center;
}

.slyd-datagrid thead th.text-right[b-um5i2ljtxu] {
    text-align: right;
}

/* Table Body Rows */
.slyd-datagrid tbody tr[b-um5i2ljtxu] {
    transition: all 0.2s ease;
}

.slyd-datagrid tbody tr:hover[b-um5i2ljtxu] {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.05));
}

.slyd-datagrid tbody tr:hover td:first-child[b-um5i2ljtxu] {
    box-shadow: inset 3px 0 0 0 #3B82F6;
}

.slyd-datagrid tbody tr:nth-child(even)[b-um5i2ljtxu] {
    background: rgba(30, 41, 59, 0.3);
}

.slyd-datagrid tbody tr:nth-child(even):hover[b-um5i2ljtxu] {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.08));
}

.slyd-datagrid tbody td[b-um5i2ljtxu] {
    padding: 1rem 1.25rem;
    color: #E2E8F0;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.slyd-datagrid tbody tr:last-child td[b-um5i2ljtxu] {
    border-bottom: none;
}

.slyd-datagrid tbody td.text-left[b-um5i2ljtxu] {
    text-align: left;
}

.slyd-datagrid tbody td.text-center[b-um5i2ljtxu] {
    text-align: center;
}

.slyd-datagrid tbody td.text-right[b-um5i2ljtxu] {
    text-align: right;
}

/* Cell Types */
.slyd-datagrid-cell-mono[b-um5i2ljtxu] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    color: #60A5FA;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.slyd-datagrid-cell-amount[b-um5i2ljtxu] {
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #34D399;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
}

.slyd-datagrid-cell-date[b-um5i2ljtxu] {
    white-space: nowrap;
}

.slyd-datagrid-cell-date .date-main[b-um5i2ljtxu] {
    color: #E2E8F0;
    font-weight: 500;
}

.slyd-datagrid-cell-date .date-time[b-um5i2ljtxu] {
    color: #64748B;
    font-size: 0.8rem;
    margin-top: 2px;
}

.slyd-datagrid-cell-sub[b-um5i2ljtxu] {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 0.25rem;
}

/* Badges - Enhanced with glow effects */
.slyd-datagrid-badge[b-um5i2ljtxu] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.slyd-datagrid-badge-success[b-um5i2ljtxu] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.15));
    color: #34D399;
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.slyd-datagrid-badge-info[b-um5i2ljtxu] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.15));
    color: #60A5FA;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.slyd-datagrid-badge-warning[b-um5i2ljtxu] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15));
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.slyd-datagrid-badge-danger[b-um5i2ljtxu] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.15));
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.slyd-datagrid-badge-dark[b-um5i2ljtxu] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.3), rgba(71, 85, 105, 0.2));
    color: #94A3B8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.slyd-datagrid-badge-primary[b-um5i2ljtxu] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(129, 140, 248, 0.15));
    color: #A5B4FC;
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Pagination - Modern card style */
.slyd-datagrid-pagination[b-um5i2ljtxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05), transparent);
    border-top: 1px solid rgba(99, 102, 241, 0.15);
    flex-wrap: wrap;
    gap: 1rem;
}

.slyd-datagrid-pagination-left[b-um5i2ljtxu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.slyd-datagrid-pagination-info[b-um5i2ljtxu] {
    color: #94A3B8;
    font-size: 0.875rem;
}

.slyd-datagrid-pagination-info strong[b-um5i2ljtxu] {
    color: #60A5FA;
    font-weight: 600;
}

/* Page Size Selector */
.slyd-datagrid-pagesize[b-um5i2ljtxu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slyd-datagrid-pagesize-label[b-um5i2ljtxu] {
    color: #94A3B8;
    font-size: 0.875rem;
}

.slyd-datagrid-pagesize-select[b-um5i2ljtxu] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    color: #E2E8F0;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360A5FA'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    padding-right: 2rem;
}

.slyd-datagrid-pagesize-select:hover[b-um5i2ljtxu] {
    border-color: rgba(59, 130, 246, 0.5);
    background-color: rgba(59, 130, 246, 0.15);
}

.slyd-datagrid-pagesize-select:focus[b-um5i2ljtxu] {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.slyd-datagrid-pagesize-select option[b-um5i2ljtxu] {
    background: #1E293B;
    color: #E2E8F0;
}

.slyd-datagrid-pagination-buttons[b-um5i2ljtxu] {
    display: flex;
    gap: 0.5rem;
}

.slyd-datagrid-pagination-btn[b-um5i2ljtxu] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #E2E8F0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.slyd-datagrid-pagination-btn:hover:not(:disabled)[b-um5i2ljtxu] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.slyd-datagrid-pagination-btn:disabled[b-um5i2ljtxu] {
    opacity: 0.4;
    cursor: not-allowed;
}

.slyd-datagrid-pagination-btn.slyd-datagrid-pagination-current[b-um5i2ljtxu] {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border-color: transparent;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Loading State */
.slyd-datagrid-loading[b-um5i2ljtxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    color: #94A3B8;
}

.slyd-datagrid-spinner[b-um5i2ljtxu] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: slyd-datagrid-spin-b-um5i2ljtxu 0.8s linear infinite;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
}

@keyframes slyd-datagrid-spin-b-um5i2ljtxu {
    to {
        transform: rotate(360deg);
    }
}

.slyd-datagrid-loading p[b-um5i2ljtxu] {
    margin-top: 1.25rem;
    margin-bottom: 0;
    font-weight: 500;
    color: #60A5FA;
}

/* Empty State */
.slyd-datagrid-empty[b-um5i2ljtxu] {
    text-align: center;
    padding: 4rem 2rem;
    color: #64748B;
}

.slyd-datagrid-empty i[b-um5i2ljtxu] {
    font-size: 3.5rem;
    margin-bottom: 1.25rem;
    color: #3B82F6;
    opacity: 0.5;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
}

.slyd-datagrid-empty p[b-um5i2ljtxu] {
    color: #E2E8F0;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.slyd-datagrid-empty small[b-um5i2ljtxu] {
    color: #64748B;
}

.slyd-datagrid-empty.slyd-datagrid-error i[b-um5i2ljtxu],
.slyd-datagrid-empty.slyd-datagrid-error p[b-um5i2ljtxu] {
    color: #F87171;
}

.slyd-datagrid-empty.slyd-datagrid-error i[b-um5i2ljtxu] {
    filter: drop-shadow(0 0 20px rgba(248, 113, 113, 0.3));
}

/* Row Variants */
.slyd-datagrid tbody tr.row-warning[b-um5i2ljtxu] {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), transparent);
}

.slyd-datagrid tbody tr.row-warning td:first-child[b-um5i2ljtxu] {
    box-shadow: inset 3px 0 0 0 #FBBF24;
}

.slyd-datagrid tbody tr.row-danger[b-um5i2ljtxu] {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), transparent);
}

.slyd-datagrid tbody tr.row-danger td:first-child[b-um5i2ljtxu] {
    box-shadow: inset 3px 0 0 0 #EF4444;
}

.slyd-datagrid tbody tr.row-success[b-um5i2ljtxu] {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), transparent);
}

.slyd-datagrid tbody tr.row-success td:first-child[b-um5i2ljtxu] {
    box-shadow: inset 3px 0 0 0 #22C55E;
}

/* Muted rows */
.slyd-datagrid tbody tr.row-muted[b-um5i2ljtxu] {
    opacity: 0.5;
}

.slyd-datagrid tbody tr.row-muted:hover[b-um5i2ljtxu] {
    opacity: 0.7;
}

/* Detail Row / Expandable Row */
.slyd-datagrid tbody tr.slyd-datagrid-row-expanded[b-um5i2ljtxu] {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.1));
}

.slyd-datagrid tbody tr.slyd-datagrid-row-expanded td:first-child[b-um5i2ljtxu] {
    box-shadow: inset 3px 0 0 0 #6366F1;
}

.slyd-datagrid tbody tr.slyd-datagrid-detail-row[b-um5i2ljtxu] {
    background: rgba(15, 23, 42, 0.8);
}

.slyd-datagrid tbody tr.slyd-datagrid-detail-row:hover[b-um5i2ljtxu] {
    background: rgba(15, 23, 42, 0.8);
}

.slyd-datagrid tbody tr.slyd-datagrid-detail-row > td[b-um5i2ljtxu] {
    padding: 0;
    border-bottom: 2px solid rgba(99, 102, 241, 0.4);
}

.slyd-datagrid-detail-content[b-um5i2ljtxu] {
    padding: 1.5rem;
    animation: slyd-datagrid-detail-expand-b-um5i2ljtxu 0.25s ease-out;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05), transparent);
}

@keyframes slyd-datagrid-detail-expand-b-um5i2ljtxu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .slyd-datagrid-container[b-um5i2ljtxu] {
        border-radius: 12px;
    }

    .slyd-datagrid thead th[b-um5i2ljtxu],
    .slyd-datagrid tbody td[b-um5i2ljtxu] {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .slyd-datagrid-pagination[b-um5i2ljtxu] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .slyd-datagrid-pagination-left[b-um5i2ljtxu] {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .slyd-datagrid-pagination-info[b-um5i2ljtxu] {
        text-align: center;
    }

    .slyd-datagrid-pagination-buttons[b-um5i2ljtxu] {
        justify-content: center;
    }

    .slyd-datagrid-pagesize[b-um5i2ljtxu] {
        justify-content: center;
    }
}

/* Scrollbar styling for the wrapper */
.slyd-datagrid-wrapper[b-um5i2ljtxu]::-webkit-scrollbar {
    height: 8px;
}

.slyd-datagrid-wrapper[b-um5i2ljtxu]::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 4px;
}

.slyd-datagrid-wrapper[b-um5i2ljtxu]::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #3B82F6, #6366F1);
    border-radius: 4px;
}

.slyd-datagrid-wrapper[b-um5i2ljtxu]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #60A5FA, #818CF8);
}
/* _content/SLYD.Components/Components/Docs/BetaTitle.razor.rz.scp.css */
/* BetaTitle - Page title with badge */
h1[b-ky0qn2j6ea] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--slyd-text, #F8FAFC);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* _content/SLYD.Components/Components/Docs/CodeBlock.razor.rz.scp.css */
/* CodeBlock - Styled code block with header */
.code-block[b-sgym0htvav] {
    background-color: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.code-header[b-sgym0htvav] {
    background-color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-title[b-sgym0htvav] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.code-actions[b-sgym0htvav] {
    display: flex;
    gap: 0.5rem;
}

.code-action[b-sgym0htvav] {
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.code-action:hover[b-sgym0htvav] {
    background-color: rgba(99, 102, 241, 0.2);
    color: white;
}

.code-action.copied[b-sgym0htvav] {
    background-color: rgba(16, 185, 129, 0.3);
    color: #10B981;
}

.code-action.copied:hover[b-sgym0htvav] {
    background-color: rgba(16, 185, 129, 0.4);
}

/* Copy tooltip */
.copy-tooltip[b-sgym0htvav] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.375rem 0.625rem;
    background-color: #10B981;
    color: white;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    margin-bottom: 4px;
}

.copy-tooltip[b-sgym0htvav]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #10B981;
}

.code-action.copied .copy-tooltip[b-sgym0htvav] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.code-block pre[b-sgym0htvav] {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.code-block code[b-sgym0htvav] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #E2E8F0;
}

/* Scrollbar for code blocks */
.code-block pre[b-sgym0htvav]::-webkit-scrollbar {
    height: 6px;
}

.code-block pre[b-sgym0htvav]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.code-block pre[b-sgym0htvav]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
/* _content/SLYD.Components/Components/Docs/ComponentCard.razor.rz.scp.css */
/* ComponentCard - Feature/component showcase card */
.component-card[b-kzdxsx84ou] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: all 0.2s ease;
}

.component-card:hover[b-kzdxsx84ou] {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.component-card-header[b-kzdxsx84ou] {
    background-color: rgba(99, 102, 241, 0.1);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.component-card-header i[b-kzdxsx84ou] {
    font-size: 1.5rem;
    color: var(--slyd-primary, #6366F1);
    margin-right: 0.75rem;
}

.component-card-header h3[b-kzdxsx84ou] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.component-card-body[b-kzdxsx84ou] {
    padding: 1rem;
}

.component-card-body p[b-kzdxsx84ou] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.component-list[b-kzdxsx84ou] {
    margin: 0;
    padding-left: 1.25rem;
    list-style: none;
}

[b-kzdxsx84ou] .component-list li {
    position: relative;
    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

[b-kzdxsx84ou] .component-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: -1rem;
    color: var(--slyd-secondary, #10B981);
    font-size: 0.75rem;
}

/* Coming Soon Badge */
.coming-soon-badge[b-kzdxsx84ou] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    border-radius: 100px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* In Development indicator */
.component-card.in-development[b-kzdxsx84ou] {
    position: relative;
}

.component-card.in-development[b-kzdxsx84ou]::before {
    content: "In Development";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
    color: #A78BFA;
    border-radius: 0 8px 0 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 1;
}
/* _content/SLYD.Components/Components/Docs/DocCard.razor.rz.scp.css */
/* DocCard - Navigation/link card */
.doc-card[b-15ucyi3p16] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    transition: all 0.2s ease;
}

.doc-card:hover[b-15ucyi3p16] {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: rgba(79, 70, 229, 0.1);
    text-decoration: none;
}

.doc-card-icon[b-15ucyi3p16] {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.25rem;
    color: var(--slyd-primary, #6366F1);
    flex-shrink: 0;
}

.doc-card-content h3[b-15ucyi3p16] {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--slyd-text, #F8FAFC);
}

.doc-card-content p[b-15ucyi3p16] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}
/* _content/SLYD.Components/Components/Docs/DocCardGrid.razor.rz.scp.css */
/* DocCardGrid - Responsive grid container for documentation cards */
.doc-card-grid[b-box1yo214s] {
    display: grid;
    margin-bottom: var(--slyd-spacing-xl, 2.5rem);
}

/* Gap sizes */
.doc-card-grid.gap-sm[b-box1yo214s] {
    gap: 0.75rem;
}

.doc-card-grid.gap-md[b-box1yo214s] {
    gap: 1rem;
}

.doc-card-grid.gap-lg[b-box1yo214s] {
    gap: 1.5rem;
}

/* 2 columns (default) */
.doc-card-grid.cols-2[b-box1yo214s] {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columns */
.doc-card-grid.cols-3[b-box1yo214s] {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 columns */
.doc-card-grid.cols-4[b-box1yo214s] {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .doc-card-grid.cols-4[b-box1yo214s] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .doc-card-grid.cols-4[b-box1yo214s],
    .doc-card-grid.cols-3[b-box1yo214s] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .doc-card-grid.cols-4[b-box1yo214s],
    .doc-card-grid.cols-3[b-box1yo214s],
    .doc-card-grid.cols-2[b-box1yo214s] {
        grid-template-columns: 1fr;
    }
}
/* _content/SLYD.Components/Components/Docs/DocContent.razor.rz.scp.css */
/* DocContent - Documentation typography and layout */
.doc-content[b-7rf5jme96k] {
    width: 100%;
    color: var(--slyd-text, #F8FAFC);
}

/* Headings */
.doc-content[b-7rf5jme96k]  h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--slyd-text, #F8FAFC);
}

.doc-content[b-7rf5jme96k]  h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--slyd-text, #F8FAFC);
}

.doc-content[b-7rf5jme96k]  h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--slyd-text, #F8FAFC);
}

.doc-content[b-7rf5jme96k]  h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--slyd-text, #F8FAFC);
}

/* Paragraphs */
.doc-content[b-7rf5jme96k]  p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* Lists */
.doc-content[b-7rf5jme96k]  ul,
.doc-content[b-7rf5jme96k]  ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.doc-content[b-7rf5jme96k]  li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.doc-content[b-7rf5jme96k]  ul li {
    list-style-type: disc;
}

.doc-content[b-7rf5jme96k]  ol li {
    list-style-type: decimal;
}

/* Nested lists */
.doc-content[b-7rf5jme96k]  ul ul,
.doc-content[b-7rf5jme96k]  ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Links */
.doc-content[b-7rf5jme96k]  a {
    color: var(--slyd-primary, #6366F1);
    text-decoration: none;
    transition: all 0.2s ease;
}

.doc-content[b-7rf5jme96k]  a:hover {
    text-decoration: underline;
    color: var(--slyd-primary-light, #818CF8);
}

/* Inline code */
.doc-content[b-7rf5jme96k]  code:not(pre code) {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background-color: rgba(99, 102, 241, 0.15);
    border-radius: 4px;
    color: #E879F9;
}

/* Blockquotes */
.doc-content[b-7rf5jme96k]  blockquote {
    border-left: 4px solid var(--slyd-primary, #6366F1);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

/* Horizontal rules */
.doc-content[b-7rf5jme96k]  hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 2rem 0;
}

/* Strong/Bold */
.doc-content[b-7rf5jme96k]  strong {
    font-weight: 600;
    color: var(--slyd-text, #F8FAFC);
}

/* Emphasis/Italic */
.doc-content[b-7rf5jme96k]  em {
    font-style: italic;
}

/* Tables */
.doc-content[b-7rf5jme96k]  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.doc-content[b-7rf5jme96k]  th,
.doc-content[b-7rf5jme96k]  td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.doc-content[b-7rf5jme96k]  th {
    font-weight: 600;
    color: var(--slyd-text, #F8FAFC);
    background-color: rgba(15, 23, 42, 0.5);
}

.doc-content[b-7rf5jme96k]  tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}
/* _content/SLYD.Components/Components/Docs/DocFooter.razor.rz.scp.css */
/* DocFooter - Previous/Next navigation */
.doc-footer[b-nz52f2qzkt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.doc-footer-link[b-nz52f2qzkt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.doc-footer-link:hover[b-nz52f2qzkt] {
    border-color: var(--slyd-primary, #6366F1);
    color: var(--slyd-primary, #6366F1);
    background-color: rgba(99, 102, 241, 0.1);
    text-decoration: none;
}

.doc-footer-link i[b-nz52f2qzkt] {
    font-size: 0.75rem;
}
/* _content/SLYD.Components/Components/Docs/ImageFigure.razor.rz.scp.css */
/* ImageFigure - Image with caption */
.image-figure[b-0mhctt2etq] {
    margin: 1.5rem 0;
    text-align: center;
}

.image-figure-img[b-0mhctt2etq] {
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.image-figure-caption[b-0mhctt2etq] {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
}
/* _content/SLYD.Components/Components/Docs/InfoBox.razor.rz.scp.css */
/* InfoBox - Informational callout component */
.info-box[b-71mc6w89ti] {
    background-color: rgba(99, 102, 241, 0.1);
    border-left: 4px solid var(--slyd-primary, #6366F1);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-box-header[b-71mc6w89ti] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.info-box-icon[b-71mc6w89ti] {
    margin-right: 0.5rem;
    color: var(--slyd-primary, #6366F1);
}

.info-box-title[b-71mc6w89ti] {
    font-weight: 600;
    color: var(--slyd-primary, #6366F1);
}

.info-box-content[b-71mc6w89ti] {
    color: rgba(255, 255, 255, 0.8);
}

[b-71mc6w89ti] .info-box-content p {
    margin: 0;
}

[b-71mc6w89ti] .info-box-content p + p {
    margin-top: 0.5rem;
}

/* Warning variant */
.info-box.warning[b-71mc6w89ti] {
    background-color: rgba(245, 158, 11, 0.1);
    border-left-color: var(--slyd-warning, #F59E0B);
}

.info-box.warning .info-box-icon[b-71mc6w89ti],
.info-box.warning .info-box-title[b-71mc6w89ti] {
    color: var(--slyd-warning, #F59E0B);
}

/* Success variant */
.info-box.success[b-71mc6w89ti] {
    background-color: rgba(16, 185, 129, 0.1);
    border-left-color: var(--slyd-secondary, #10B981);
}

.info-box.success .info-box-icon[b-71mc6w89ti],
.info-box.success .info-box-title[b-71mc6w89ti] {
    color: var(--slyd-secondary, #10B981);
}

/* Error variant */
.info-box.error[b-71mc6w89ti] {
    background-color: rgba(239, 68, 68, 0.1);
    border-left-color: #EF4444;
}

.info-box.error .info-box-icon[b-71mc6w89ti],
.info-box.error .info-box-title[b-71mc6w89ti] {
    color: #EF4444;
}

/* In Development variant */
.info-box.in-development[b-71mc6w89ti] {
    position: relative;
    background-color: rgba(139, 92, 246, 0.1);
    border-left-color: #A78BFA;
}

.info-box.in-development .info-box-icon[b-71mc6w89ti],
.info-box.in-development .info-box-title[b-71mc6w89ti] {
    color: #A78BFA;
}

.info-box.in-development[b-71mc6w89ti]::after {
    content: "In Development";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
    color: #A78BFA;
    border-radius: 100px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* _content/SLYD.Components/Components/Docs/Step.razor.rz.scp.css */
/* Step - Individual step with number, title, and description */
.step[b-1ki1bsj122] {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.step:hover[b-1ki1bsj122] {
    border-color: rgba(99, 102, 241, 0.3);
    background-color: rgba(15, 23, 42, 0.6);
}

.step-number[b-1ki1bsj122] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--slyd-primary, #6366F1), #8B5CF6);
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: 'Space Grotesk', sans-serif;
}

.step-content[b-1ki1bsj122] {
    flex: 1;
    min-width: 0;
}

.step-content h3[b-1ki1bsj122] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--slyd-text, #F8FAFC);
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.step-content p[b-1ki1bsj122] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.step-content p + p[b-1ki1bsj122] {
    margin-top: 0.5rem;
}

/* Coming Soon Badge */
.coming-soon-badge[b-1ki1bsj122] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    border-radius: 100px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive - stack on mobile */
@media (max-width: 640px) {
    .step[b-1ki1bsj122] {
        flex-direction: column !important;
        gap: 0.75rem;
    }

    .step-number[b-1ki1bsj122] {
        width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }
}
/* _content/SLYD.Components/Components/Docs/StepList.razor.rz.scp.css */
/* StepList - Container for numbered steps */
.steps-container[b-tkuilx0epg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}
/* _content/SLYD.Components/Components/Dropdowns/FilterDropdown.razor.rz.scp.css */
/* Filter Dropdown Container */
.filter-dropdown-container[b-19lzrsz5so] {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Trigger Button - matches filter-section style */
.filter-dropdown-trigger[b-19lzrsz5so] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 8px;
}

.filter-dropdown-trigger:hover[b-19lzrsz5so] {
    background-color: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.filter-dropdown-label[b-19lzrsz5so] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.filter-dropdown-badge[b-19lzrsz5so] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: var(--primary);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.filter-dropdown-icon[b-19lzrsz5so] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease;
}

.filter-dropdown-container:hover .filter-dropdown-icon[b-19lzrsz5so] {
    transform: rotate(180deg);
}

/* Dropdown Panel - matches filter-panel style */
.filter-dropdown-panel[b-19lzrsz5so] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-19lzrsz5so 0.2s ease;
}

@keyframes slideDown-b-19lzrsz5so {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Header - matches filter-title style */
.filter-dropdown-header[b-19lzrsz5so] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-dropdown-title[b-19lzrsz5so] {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.filter-dropdown-reset[b-19lzrsz5so] {
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
}

.filter-dropdown-reset:hover[b-19lzrsz5so] {
    text-decoration: underline;
}

/* Dropdown List - matches checkbox-group scrolling */
.filter-dropdown-list[b-19lzrsz5so] {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;

    /* Custom scrollbar - matches filter-panel scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(15, 23, 42, 0.3);
}

.filter-dropdown-list[b-19lzrsz5so]::-webkit-scrollbar {
    width: 6px;
}

.filter-dropdown-list[b-19lzrsz5so]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 3px;
}

.filter-dropdown-list[b-19lzrsz5so]::-webkit-scrollbar-thumb {
    background-color: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}

.filter-dropdown-list[b-19lzrsz5so]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99, 102, 241, 0.5);
}

/* Dropdown Items - matches checkbox-item style */
.filter-dropdown-item[b-19lzrsz5so] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    cursor: pointer;
}

/* Custom Checkbox - exact match from SidebarFilters */
.filter-checkbox[b-19lzrsz5so] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(15, 23, 42, 0.6);
    margin-right: 10px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.filter-checkbox.checked[b-19lzrsz5so] {
    background-color: var(--primary);
    border-color: var(--primary);
}

.filter-checkbox.checked[b-19lzrsz5so]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-item-label[b-19lzrsz5so] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
}

/* Empty State - matches no-data style */
.filter-dropdown-empty[b-19lzrsz5so] {
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
}
/* _content/SLYD.Components/Components/Dropdowns/SimpleDropdown.razor.rz.scp.css */
.custom-dropdown[b-yx6drz55rg] {
    position: relative;
    width: 100%;
    min-width: 140px;
}

/* Dropdown trigger/button */
.dropdown-trigger[b-yx6drz55rg] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--slyd-radius-md);
    padding: var(--slyd-spacing-sm) var(--slyd-spacing-md);
    color: var(--slyd-text-primary);
    font-size: var(--slyd-font-size-sm);
    font-weight: var(--slyd-font-weight-medium);
    cursor: pointer;
    transition: all var(--slyd-transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    outline: none;
    user-select: none;
}

.dropdown-trigger:hover[b-yx6drz55rg] {
    border-color: var(--slyd-primary-light);
    background: rgba(255, 255, 255, 0.08);
}

.dropdown-trigger:focus[b-yx6drz55rg] {
    border-color: var(--slyd-primary-light);
    box-shadow: 0 0 0 3px hsla(186, 94%, 43%, 0.15);
}

.dropdown-display[b-yx6drz55rg] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.placeholder[b-yx6drz55rg] {
    color: var(--slyd-text-muted);
}

/* Dropdown icon */
.dropdown-icon[b-yx6drz55rg] {
    color: var(--slyd-text-tertiary);
    font-size: 11px;
    transition: transform var(--slyd-transition);
    flex-shrink: 0;
}

.dropdown-icon.open[b-yx6drz55rg] {
    transform: rotate(180deg);
}

/* Dropdown panel */
.dropdown-panel[b-yx6drz55rg] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--slyd-bg-elevated);
    border: 1px solid var(--slyd-primary-light);
    border-radius: var(--slyd-radius-md);
    box-shadow: var(--slyd-shadow-lg), 0 1px 3px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    z-index: 9999; /* Increased to stay above all form elements and sections */
    max-height: 280px;
    overflow: hidden;
    animation: dropdownSlideIn-b-yx6drz55rg 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownSlideIn-b-yx6drz55rg {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown options container */
.dropdown-options[b-yx6drz55rg] {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

/* Custom scrollbar */
.dropdown-options[b-yx6drz55rg]::-webkit-scrollbar {
    width: 8px;
}

.dropdown-options[b-yx6drz55rg]::-webkit-scrollbar-track {
    background: var(--slyd-bg-darker);
    border-radius: 4px;
    margin: 4px 0;
}

.dropdown-options[b-yx6drz55rg]::-webkit-scrollbar-thumb {
    background: hsla(186, 94%, 43%, 0.5);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dropdown-options[b-yx6drz55rg]::-webkit-scrollbar-thumb:hover {
    background: hsla(186, 94%, 43%, 0.7);
    background-clip: padding-box;
}

/* Individual dropdown option */
.dropdown-option[b-yx6drz55rg] {
    padding: var(--slyd-spacing-sm) 12px;
    border-radius: var(--slyd-radius-sm);
    cursor: pointer;
    transition: all 0.12s ease;
    color: var(--slyd-text-secondary);
    font-size: var(--slyd-font-size-sm);
    font-weight: var(--slyd-font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.dropdown-option:hover[b-yx6drz55rg],
.dropdown-option.focused[b-yx6drz55rg] {
    background: var(--slyd-primary);
    color: var(--slyd-text-primary);
}

.dropdown-option.selected[b-yx6drz55rg] {
    background: var(--slyd-primary);
    border: 1px solid var(--slyd-primary-light);
    color: var(--slyd-text-primary);
}

.dropdown-option.selected:hover[b-yx6drz55rg],
.dropdown-option.selected.focused[b-yx6drz55rg] {
    background: var(--slyd-primary);
}

/* Check icon for selected item */
.option-check[b-yx6drz55rg] {
    color: var(--slyd-primary-light);
    font-size: 12px;
    flex-shrink: 0;
    animation: checkIn-b-yx6drz55rg 0.2s ease;
}

@keyframes checkIn-b-yx6drz55rg {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Empty state */
.dropdown-empty[b-yx6drz55rg] {
    padding: 20px 12px;
    color: var(--slyd-text-muted);
    font-size: var(--slyd-font-size-sm);
    text-align: center;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dropdown-panel[b-yx6drz55rg] {
        max-height: 240px;
    }

    .dropdown-options[b-yx6drz55rg] {
        max-height: 240px;
    }

    .dropdown-trigger[b-yx6drz55rg] {
        padding: 9px 12px;
        font-size: var(--slyd-font-size-xs);
    }

    .dropdown-option[b-yx6drz55rg] {
        padding: 9px 10px;
        font-size: var(--slyd-font-size-xs);
    }
}
/* _content/SLYD.Components/Components/Inputs/MultiSelect.razor.rz.scp.css */
.multi-select[b-eo0x1zdqge] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

/* Individual option container */
.multi-select-option[b-eo0x1zdqge] {
    padding: var(--slyd-spacing-sm) 6px;
    border-radius: var(--slyd-radius-sm);
    transition: background-color var(--slyd-transition-fast);
    cursor: pointer;
}

.multi-select-option:hover[b-eo0x1zdqge] {
    background: hsla(186, 94%, 43%, 0.1);
}

/* Select All special styling */
.multi-select-option.select-all[b-eo0x1zdqge] {
    background: hsla(186, 94%, 43%, 0.08);
    margin-bottom: 2px;
}

.multi-select-option.select-all:hover[b-eo0x1zdqge] {
    background: hsla(186, 94%, 43%, 0.15);
}

/* Divider after Select All */
.multi-select-divider[b-eo0x1zdqge] {
    height: 1px;
    background: var(--slyd-border-default);
    margin: 4px 0 6px 0;
    opacity: 0.3;
}

/* Checkbox label container */
.checkbox-label[b-eo0x1zdqge] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    position: relative;
    width: 100%;
}

/* Hide default checkbox */
.checkbox-input[b-eo0x1zdqge] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Custom checkbox */
.checkbox-custom[b-eo0x1zdqge] {
    position: relative;
    width: 18px;
    height: 18px;
    background: var(--slyd-bg-elevated);
    border: 2px solid var(--slyd-primary-light);
    border-radius: var(--slyd-radius-sm);
    transition: all var(--slyd-transition-fast);
    flex-shrink: 0;
}

/* Checkbox hover state */
.checkbox-label:hover .checkbox-custom[b-eo0x1zdqge] {
    border-color: var(--slyd-primary);
    background: hsla(186, 94%, 43%, 0.1);
}

/* Checkbox checked state */
.checkbox-input:checked ~ .checkbox-custom[b-eo0x1zdqge] {
    background: var(--slyd-primary);
    border-color: var(--slyd-primary);
}

/* Checkmark */
.checkbox-input:checked ~ .checkbox-custom[b-eo0x1zdqge]::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: checkmark-b-eo0x1zdqge 0.2s ease;
}

@keyframes checkmark-b-eo0x1zdqge {
    0% {
        transform: rotate(45deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }
}

/* Checkbox text label */
.checkbox-text[b-eo0x1zdqge] {
    color: var(--slyd-text-primary);
    font-size: var(--slyd-font-size-base);
    font-weight: var(--slyd-font-weight-medium);
    flex: 1;
}

/* Empty state */
.multi-select-empty[b-eo0x1zdqge] {
    padding: 20px 12px;
    color: var(--slyd-text-secondary);
    font-size: var(--slyd-font-size-base);
    text-align: center;
    font-style: italic;
}

/* Focus state for accessibility */
.checkbox-input:focus ~ .checkbox-custom[b-eo0x1zdqge] {
    box-shadow: 0 0 0 3px hsla(186, 94%, 43%, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .multi-select-option[b-eo0x1zdqge] {
        padding: 7px 5px;
    }

    .checkbox-custom[b-eo0x1zdqge] {
        width: 16px;
        height: 16px;
    }

    .checkbox-input:checked ~ .checkbox-custom[b-eo0x1zdqge]::after {
        left: 4px;
        top: 1px;
        width: 3px;
        height: 7px;
    }

    .checkbox-text[b-eo0x1zdqge] {
        font-size: var(--slyd-font-size-sm);
    }
}
/* _content/SLYD.Components/Components/Inputs/RangeSlider.razor.rz.scp.css */
/* Range Slider Container */
.range-slider-container[b-y4g63r5eus] {
    width: 100%;
}

/* Header */
.range-slider-header[b-y4g63r5eus] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.range-slider-title[b-y4g63r5eus] {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.range-slider-reset[b-y4g63r5eus] {
    font-size: 11px;
    color: var(--primary, #6366f1);
    cursor: pointer;
}

.range-slider-reset:hover[b-y4g63r5eus] {
    text-decoration: underline;
}

/* Track Container */
.range-slider-track-container[b-y4g63r5eus] {
    position: relative;
    height: 40px;
    margin-bottom: 16px;
}

/* Track Background */
.range-slider-track[b-y4g63r5eus] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    transform: translateY(-50%);
}

/* Selected Range Highlight */
.range-slider-range[b-y4g63r5eus] {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--primary, #6366f1);
    border-radius: 3px;
    transition: all 0.1s ease;
}

/* Range Inputs (sliders) */
.range-slider-input[b-y4g63r5eus] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}

.range-slider-input[b-y4g63r5eus]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary, #6366f1);
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.range-slider-input[b-y4g63r5eus]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.range-slider-input[b-y4g63r5eus]::-webkit-slider-thumb:active {
    transform: scale(1.05);
}

.range-slider-input[b-y4g63r5eus]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary, #6366f1);
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.range-slider-input[b-y4g63r5eus]::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.range-slider-input[b-y4g63r5eus]::-moz-range-thumb:active {
    transform: scale(1.05);
}

/* Ensure the max slider is on top */
.range-slider-max[b-y4g63r5eus] {
    z-index: 2;
}

.range-slider-min[b-y4g63r5eus] {
    z-index: 1;
}

/* Value Inputs */
.range-slider-values[b-y4g63r5eus] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.range-value-group[b-y4g63r5eus] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.range-value-group label[b-y4g63r5eus] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 35px;
}

.range-value-input[b-y4g63r5eus] {
    width: 100%;
    max-width: 80px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    transition: all 0.2s ease;
    -moz-appearance: textfield;
}

.range-value-input:focus[b-y4g63r5eus] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Hide default spinner buttons */
.range-value-input[b-y4g63r5eus]::-webkit-outer-spin-button,
.range-value-input[b-y4g63r5eus]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range-unit[b-y4g63r5eus] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 30px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .range-slider-values[b-y4g63r5eus] {
        flex-direction: column;
    }

    .range-value-group[b-y4g63r5eus] {
        width: 100%;
    }

    .range-value-input[b-y4g63r5eus] {
        max-width: none;
    }
}
/* _content/SLYD.Components/Components/Inputs/SearchBoxWithSuggestions.razor.rz.scp.css */
/* Search Box Container */
.search-box-container[b-lgrs96yxkd] {
    position: relative;
    width: 100%;
}

.search-input-wrapper[b-lgrs96yxkd] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Search Icon */
.search-icon[b-lgrs96yxkd] {
    position: absolute;
    left: 12px;
    color: var(--slyd-text-muted);
    font-size: var(--slyd-font-size-sm);
    pointer-events: none;
    z-index: 1;
}

/* Search Input */
.search-input[b-lgrs96yxkd] {
    width: 100%;
    padding: var(--slyd-spacing-sm) 40px var(--slyd-spacing-sm) 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--slyd-border-default);
    border-radius: var(--slyd-radius-md);
    color: var(--slyd-text-primary);
    font-size: var(--slyd-font-size-sm);
    font-family: var(--slyd-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    transition: all var(--slyd-transition);
}

.search-input[b-lgrs96yxkd]::placeholder {
    color: var(--slyd-text-muted);
}

.search-input:focus[b-lgrs96yxkd] {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--slyd-border-focus);
    box-shadow: 0 0 0 3px hsla(186, 94%, 43%, 0.1);
}

.search-input:disabled[b-lgrs96yxkd] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Clear Button */
.clear-button[b-lgrs96yxkd] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--slyd-text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--slyd-transition);
    z-index: 1;
    border-radius: var(--slyd-radius-sm);
}

.clear-button:hover[b-lgrs96yxkd] {
    color: var(--slyd-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Suggestions Dropdown */
.suggestions-dropdown[b-lgrs96yxkd] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--slyd-bg-elevated);
    border: 1px solid var(--slyd-border-default);
    border-radius: var(--slyd-radius-md);
    box-shadow: var(--slyd-shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 9999;
    backdrop-filter: blur(10px);
}

/* Custom Scrollbar for Suggestions */
.suggestions-dropdown[b-lgrs96yxkd]::-webkit-scrollbar {
    width: 6px;
}

.suggestions-dropdown[b-lgrs96yxkd]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.suggestions-dropdown[b-lgrs96yxkd]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.suggestions-dropdown[b-lgrs96yxkd]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Suggestion Item */
.suggestion-item[b-lgrs96yxkd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--slyd-spacing-sm) 12px;
    cursor: pointer;
    transition: background var(--slyd-transition-fast);
    border-bottom: 1px solid var(--slyd-border-subtle);
    color: var(--slyd-text-primary);
}

.suggestion-item:last-child[b-lgrs96yxkd] {
    border-bottom: none;
}

.suggestion-item:hover[b-lgrs96yxkd] {
    background: hsla(186, 94%, 43%, 0.1);
}

.suggestion-item i[b-lgrs96yxkd] {
    font-size: 16px;
    color: var(--slyd-text-muted);
    flex-shrink: 0;
}

/* Show All Results Item */
.suggestion-item.show-all[b-lgrs96yxkd] {
    background: hsla(186, 94%, 43%, 0.05);
    font-weight: var(--slyd-font-weight-medium);
    color: var(--slyd-primary-light);
    justify-content: center;
}

.suggestion-item.show-all:hover[b-lgrs96yxkd] {
    background: hsla(186, 94%, 43%, 0.15);
}

.suggestion-item.show-all i[b-lgrs96yxkd] {
    color: var(--slyd-primary-light);
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-input[b-lgrs96yxkd] {
        padding: calc(var(--slyd-spacing-sm) - 2px) 36px calc(var(--slyd-spacing-sm) - 2px) 36px;
        font-size: var(--slyd-font-size-xs);
    }

    .suggestions-dropdown[b-lgrs96yxkd] {
        max-height: 280px;
    }

    .suggestion-item[b-lgrs96yxkd] {
        padding: calc(var(--slyd-spacing-sm) - 2px) 10px;
        font-size: var(--slyd-font-size-xs);
    }
}
/* _content/SLYD.Components/Components/Inputs/TextInput.razor.rz.scp.css */
/* TextInput Component Styles - Based on SearchBox styling */
.text-input-wrapper[b-f1pfx1jqc5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.text-input-label[b-f1pfx1jqc5] {
    font-size: var(--slyd-font-size-sm);
    font-weight: var(--slyd-font-weight-medium);
    color: var(--slyd-text-secondary);
}

.text-input-container[b-f1pfx1jqc5] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.text-input-icon[b-f1pfx1jqc5] {
    position: absolute;
    left: 12px;
    color: var(--slyd-text-muted);
    font-size: var(--slyd-font-size-sm);
    pointer-events: none;
    z-index: 1;
}

/* Text Input - matches search-input styling */
.text-input[b-f1pfx1jqc5] {
    width: 100%;
    padding: var(--slyd-spacing-sm) var(--slyd-spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--slyd-border-default);
    border-radius: var(--slyd-radius-md);
    color: var(--slyd-text-primary);
    font-size: var(--slyd-font-size-sm);
    font-family: var(--slyd-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    transition: all var(--slyd-transition);
}

.text-input.has-icon[b-f1pfx1jqc5] {
    padding-left: 40px;
}

.text-input[b-f1pfx1jqc5]::placeholder {
    color: var(--slyd-text-muted);
}

.text-input:hover[b-f1pfx1jqc5] {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--slyd-border-hover);
}

.text-input:focus[b-f1pfx1jqc5] {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--slyd-border-focus);
    box-shadow: 0 0 0 3px hsla(186, 94%, 43%, 0.1);
}

.text-input:disabled[b-f1pfx1jqc5] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Textarea specific */
textarea.text-input[b-f1pfx1jqc5] {
    resize: vertical;
    min-height: 100px;
    line-height: var(--slyd-line-height-normal);
}

/* Help text */
.text-input-help[b-f1pfx1jqc5] {
    font-size: var(--slyd-font-size-xs);
    color: var(--slyd-text-muted);
}

/* Error state */
.text-input-wrapper.has-error .text-input[b-f1pfx1jqc5] {
    border-color: hsla(0, 84%, 60%, 0.5);
}

.text-input-wrapper.has-error .text-input:focus[b-f1pfx1jqc5] {
    border-color: hsla(0, 84%, 60%, 0.7);
    box-shadow: 0 0 0 3px hsla(0, 84%, 60%, 0.1);
}

.text-input-error[b-f1pfx1jqc5] {
    font-size: var(--slyd-font-size-xs);
    color: var(--slyd-danger);
}

/* Responsive Design */
@media (max-width: 768px) {
    .text-input[b-f1pfx1jqc5] {
        padding: calc(var(--slyd-spacing-sm) - 2px) calc(var(--slyd-spacing-md) - 2px);
        font-size: var(--slyd-font-size-xs);
    }

    .text-input.has-icon[b-f1pfx1jqc5] {
        padding-left: 36px;
    }
}
/* _content/SLYD.Components/Components/Inputs/ToggleSwitch.razor.rz.scp.css */
/* Toggle Container */
.toggle-container[b-u1a86lbh49] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.toggle-label[b-u1a86lbh49] {
    font-size: var(--slyd-font-size-base);
    font-weight: var(--slyd-font-weight-medium);
    color: var(--slyd-text-primary);
    font-family: var(--slyd-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    margin: 0;
}

/* Toggle Switch Button */
.toggle-switch[b-u1a86lbh49] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.toggle-switch:disabled[b-u1a86lbh49] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Toggle Track */
.toggle-track[b-u1a86lbh49] {
    position: relative;
    display: block;
    width: 54px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--slyd-border-default);
    border-radius: 14px;
    transition: all var(--slyd-transition);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch:not(:disabled):not(.checked):hover .toggle-track[b-u1a86lbh49] {
    background: rgba(255, 255, 255, 0.15);
}

/* Checked state track */
.toggle-switch.checked .toggle-track[b-u1a86lbh49] {
    background: var(--slyd-primary-light);
    border-color: transparent;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
                0 0 12px hsla(186, 94%, 43%, 0.4);
}

/* 3D Ball Toggle Head */
.toggle-ball[b-u1a86lbh49] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #e5e7eb 40%, #9ca3af);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Ball highlight (creates 3D shine effect) */
.toggle-ball[b-u1a86lbh49]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), transparent 70%);
    filter: blur(1px);
}

/* Ball shadow (creates depth) */
.toggle-ball[b-u1a86lbh49]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.6;
}

/* Checked state ball position */
.toggle-switch.checked .toggle-ball[b-u1a86lbh49] {
    left: 28px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #f0f9ff 40%, #bae6fd);
    box-shadow:
        0 2px 6px hsla(186, 94%, 43%, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px hsla(186, 94%, 43%, 0.3);
}

/* Active (pressed) state */
.toggle-switch:not(:disabled):active .toggle-ball[b-u1a86lbh49] {
    transform: scale(0.92);
}

/* Focus state for accessibility */
.toggle-switch:focus-visible .toggle-track[b-u1a86lbh49] {
    outline: 2px solid var(--slyd-primary);
    outline-offset: 2px;
}
/* _content/SLYD.Components/Components/Layout/ActionBar.razor.rz.scp.css */
/* Action Bar Component */
.action-bar[b-5j5cxfgqg6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 24px;
    background: var(--bg-chip);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 100;
}

/* Button styling within action bar */
.action-bar[b-5j5cxfgqg6]  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.action-bar[b-5j5cxfgqg6]  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-bar[b-5j5cxfgqg6]  .btn:active:not(:disabled) {
    transform: translateY(0);
}

.action-bar[b-5j5cxfgqg6]  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-bar[b-5j5cxfgqg6]  .btn i {
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-bar[b-5j5cxfgqg6] {
        flex-wrap: wrap;
        padding: 8px;
    }

    .action-bar[b-5j5cxfgqg6]  .btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 140px;
    }
}

@media (max-width: 576px) {
    .action-bar[b-5j5cxfgqg6] {
        padding: 8px;
        margin-bottom: 16px;
    }
}
/* _content/SLYD.Components/Components/Layout/DataCard.razor.rz.scp.css */
/* DataCard Component Styles */
.data-card[b-dthtd0kr4j] {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-lg, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-md, 16px);
    height: 100%;
}

/* Clickable variant */
.data-card-clickable[b-dthtd0kr4j] {
    cursor: pointer;
}

.data-card-clickable:hover[b-dthtd0kr4j] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.data-card-clickable:active[b-dthtd0kr4j] {
    transform: translateY(0);
}

/* Header with icon and trend */
.data-card-header[b-dthtd0kr4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--slyd-spacing-sm, 8px);
}

/* Icon Styling */
.data-card-icon[b-dthtd0kr4j] {
    width: 48px;
    height: 48px;
    border-radius: var(--slyd-radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: rgba(99, 102, 241, 0.15);
    color: var(--slyd-primary, #6366F1);
    transition: all var(--slyd-transition, 0.3s ease);
}

.data-card:hover .data-card-icon[b-dthtd0kr4j] {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* Trend Indicator */
.data-card-trend[b-dthtd0kr4j] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-xs, 4px);
    padding: var(--slyd-spacing-xs, 4px) var(--slyd-spacing-sm, 8px);
    border-radius: var(--slyd-radius-full, 9999px);
    font-size: var(--slyd-font-size-xs, 0.75rem);
    font-weight: var(--slyd-font-weight-medium, 500);
    white-space: nowrap;
}

.data-card-trend.trend-up[b-dthtd0kr4j] {
    background: var(--slyd-success-bg, rgba(34, 197, 94, 0.15));
    color: var(--slyd-success-light, #22C55E);
}

.data-card-trend.trend-down[b-dthtd0kr4j] {
    background: var(--slyd-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--slyd-error-light, #EF4444);
}

/* Body Section */
.data-card-body[b-dthtd0kr4j] {
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-md, 16px);
    flex: 1;
}

/* Info Section */
.data-card-info[b-dthtd0kr4j] {
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-xs, 4px);
}

.data-card-title[b-dthtd0kr4j] {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
}

.data-card-value[b-dthtd0kr4j] {
    font-size: var(--slyd-font-size-2xl, 1.5rem);
    font-weight: var(--slyd-font-weight-bold, 700);
    font-family: var(--slyd-font-family-mono, 'JetBrains Mono', monospace);
    color: var(--slyd-text, #F8FAFC);
    line-height: 1.2;
}

.data-card-subtitle[b-dthtd0kr4j] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    color: var(--slyd-text-secondary, rgba(248, 250, 252, 0.5));
}

/* Custom Content Area */
.data-card-content[b-dthtd0kr4j] {
    margin-top: auto;
}

/* Footer */
.data-card-footer[b-dthtd0kr4j] {
    padding-top: var(--slyd-spacing-md, 16px);
    border-top: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
    margin-top: auto;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .data-card[b-dthtd0kr4j] {
        padding: var(--slyd-spacing-md, 16px);
    }

    .data-card-icon[b-dthtd0kr4j] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .data-card-value[b-dthtd0kr4j] {
        font-size: var(--slyd-font-size-xl, 1.25rem);
    }
}
/* _content/SLYD.Components/Components/Layout/DataCardGrid.razor.rz.scp.css */
/* DataCardGrid - Responsive grid container for DataCard components */

/* Container wrapper */
.data-card-grid-container[b-o9u963a4ah] {
    width: 100%;
}

/* Container with background */
.data-card-grid-container.has-background[b-o9u963a4ah] {
    background: var(--slyd-card-bg-frosted-glass);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-lg, 24px);
    transition: none;
}

/* Header section */
.data-card-grid-header[b-o9u963a4ah] {
    margin-bottom: var(--slyd-spacing-lg, 24px);
}

.data-card-grid-title[b-o9u963a4ah] {
    font-size: var(--slyd-font-size-xl, 1.25rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    color: var(--slyd-text, #F8FAFC);
    margin: 0;
}

.data-card-grid-subtitle[b-o9u963a4ah] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
    margin: var(--slyd-spacing-xs, 4px) 0 0 0;
}

/* Grid layout */
.data-card-grid[b-o9u963a4ah] {
    display: grid;
    width: 100%;
    align-items: stretch;
}

.data-card-grid > *[b-o9u963a4ah] {
    display: flex;
    flex-direction: column;
}

/* ============================================
   Gap Sizes
   ============================================ */

.data-card-grid.gap-sm[b-o9u963a4ah] {
    gap: var(--slyd-spacing-sm, 8px);
}

.data-card-grid.gap-md[b-o9u963a4ah] {
    gap: var(--slyd-spacing-md, 16px);
}

.data-card-grid.gap-lg[b-o9u963a4ah] {
    gap: var(--slyd-spacing-lg, 24px);
}

/* ============================================
   Column-based Grid Layouts
   ============================================ */

/* 1 column */
.data-card-grid.grid-cols-1[b-o9u963a4ah] {
    grid-template-columns: 1fr;
}

/* 2 columns */
.data-card-grid.grid-cols-2[b-o9u963a4ah] {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columns (default) */
.data-card-grid.grid-cols-3[b-o9u963a4ah] {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 columns */
.data-card-grid.grid-cols-4[b-o9u963a4ah] {
    grid-template-columns: repeat(4, 1fr);
}

/* 5 columns */
.data-card-grid.grid-cols-5[b-o9u963a4ah] {
    grid-template-columns: repeat(5, 1fr);
}

/* 6 columns */
.data-card-grid.grid-cols-6[b-o9u963a4ah] {
    grid-template-columns: repeat(6, 1fr);
}

/* ============================================
   Auto-fit Mode
   ============================================ */

.data-card-grid.grid-auto-fit[b-o9u963a4ah] {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width, 280px), 1fr));
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Extra large screens (1400px+) - maintain column count */
@media (max-width: 1400px) {
    .data-card-grid.grid-cols-6[b-o9u963a4ah] {
        grid-template-columns: repeat(4, 1fr);
    }

    .data-card-grid.grid-cols-5[b-o9u963a4ah] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large screens (1200px) */
@media (max-width: 1200px) {
    .data-card-grid.grid-cols-6[b-o9u963a4ah],
    .data-card-grid.grid-cols-5[b-o9u963a4ah],
    .data-card-grid.grid-cols-4[b-o9u963a4ah] {
        grid-template-columns: repeat(3, 1fr);
    }

    .data-card-grid.grid-cols-3[b-o9u963a4ah] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium screens (900px) */
@media (max-width: 900px) {
    .data-card-grid.grid-cols-6[b-o9u963a4ah],
    .data-card-grid.grid-cols-5[b-o9u963a4ah],
    .data-card-grid.grid-cols-4[b-o9u963a4ah],
    .data-card-grid.grid-cols-3[b-o9u963a4ah] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens (768px) */
@media (max-width: 768px) {
    .data-card-grid.grid-cols-6[b-o9u963a4ah],
    .data-card-grid.grid-cols-5[b-o9u963a4ah],
    .data-card-grid.grid-cols-4[b-o9u963a4ah],
    .data-card-grid.grid-cols-3[b-o9u963a4ah],
    .data-card-grid.grid-cols-2[b-o9u963a4ah] {
        grid-template-columns: 1fr;
    }

    /* Reduce gap on mobile */
    .data-card-grid.gap-lg[b-o9u963a4ah] {
        gap: var(--slyd-spacing-md, 16px);
    }

    .data-card-grid.gap-md[b-o9u963a4ah] {
        gap: var(--slyd-spacing-sm, 8px);
    }
}

/* Extra small screens (480px) */
@media (max-width: 480px) {
    /* Further reduce gaps on very small screens */
    .data-card-grid[b-o9u963a4ah] {
        gap: var(--slyd-spacing-sm, 8px);
    }

    .data-card-grid.grid-auto-fit[b-o9u963a4ah] {
        grid-template-columns: 1fr;
    }

    /* Reduce padding on background containers */
    .data-card-grid-container.has-background[b-o9u963a4ah] {
        padding: var(--slyd-spacing-md, 16px);
    }
}
/* _content/SLYD.Components/Components/Layout/DataCardList.razor.rz.scp.css */
/* DataCardList - Vertical list container for horizontal cards */

/* Container wrapper */
.data-card-list-container[b-7icfhrthd2] {
    width: 100%;
}

/* Container with background */
.data-card-list-container.has-background[b-7icfhrthd2] {
    background: var(--slyd-card-bg-frosted-glass);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--slyd-radius-lg, 12px);
    border-top: 1px solid var(--slyd-border-refelection, rgba(255, 255, 255, 0.08));
    border-left: 1px solid hsla(239, 60%, 80%, 0.2);
    border-bottom:1px solid hsla(239, 60%, 80%, 0.1) ;
    padding: var(--slyd-spacing-lg, 24px);
    transition: none;
}



/* Header section */
.data-card-list-header[b-7icfhrthd2] {
    margin-bottom: var(--slyd-spacing-lg, 24px);
}

.data-card-list-title[b-7icfhrthd2] {
    font-size: var(--slyd-font-size-xl, 1.25rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    color: var(--slyd-text, #F8FAFC);
    margin: 0;
}

.data-card-list-subtitle[b-7icfhrthd2] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
    margin: var(--slyd-spacing-xs, 4px) 0 0 0;
}

/* List layout - vertical stack */
.data-card-list[b-7icfhrthd2] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Gap Sizes */
.data-card-list.gap-sm[b-7icfhrthd2] {
    gap: var(--slyd-spacing-sm, 8px);
}

.data-card-list.gap-md[b-7icfhrthd2] {
    gap: var(--slyd-spacing-md, 16px);
}

.data-card-list.gap-lg[b-7icfhrthd2] {
    gap: var(--slyd-spacing-lg, 24px);
}

/* Footer section */
.data-card-list-footer[b-7icfhrthd2] {
    margin-top: var(--slyd-spacing-lg, 24px);
    padding-top: var(--slyd-spacing-md, 16px);
    border-top: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    /* Reduce padding on background containers */
    .data-card-list-container.has-background[b-7icfhrthd2] {
        padding: var(--slyd-spacing-md, 16px);
    }

    /* Reduce gap on mobile */
    .data-card-list.gap-lg[b-7icfhrthd2] {
        gap: var(--slyd-spacing-md, 16px);
    }

    .data-card-list.gap-md[b-7icfhrthd2] {
        gap: var(--slyd-spacing-sm, 8px);
    }
}

@media (max-width: 480px) {
    /* Further reduce gaps on very small screens */
    .data-card-list[b-7icfhrthd2] {
        gap: var(--slyd-spacing-sm, 8px);
    }
}
/* _content/SLYD.Components/Components/Layout/LayoutShell.razor.rz.scp.css */
/* Layout Shell - Dashboard layout structure */
.layout-shell[b-5jxprnwga6] {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Mobile sidebar toggle button */
.mobile-sidebar-toggle[b-5jxprnwga6] {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: var(--slyd-radius-md, 8px);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 18px;
    display: none; /* Hidden by default on desktop */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: var(--slyd-transition, 0.3s ease);
}

.mobile-sidebar-toggle:hover[b-5jxprnwga6] {
    background: rgba(99, 102, 241, 0.3);
}

/* Sidebar container */
.sidebar-container[b-5jxprnwga6] {
    height: 100%;
    z-index: 20;
    flex-shrink: 0;
}

/* Sidebar overlay for mobile */
.sidebar-overlay[b-5jxprnwga6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--slyd-transition, 0.3s ease);
}

/* Main content area */
.main-content[b-5jxprnwga6] {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--slyd-spacing-lg, 24px) var(--slyd-spacing-xl, 32px);
    background-color: transparent;
    position: relative;
    transition: margin-left var(--slyd-transition, 0.3s ease);
}

/* Mobile responsiveness - Tablet breakpoint */
@media (max-width: 992px) {
    /* Show mobile toggle button */
    .mobile-sidebar-toggle[b-5jxprnwga6] {
        display: flex;
    }

    /* Mobile sidebar layout adjustments */
    .sidebar-container[b-5jxprnwga6] {
        position: fixed;
        width: 0; /* Completely hide sidebar by default */
        overflow: hidden;
    }

    /* Hide sidebar by default on mobile */
    .sidebar-container[b-5jxprnwga6]  .sidebar,
    .sidebar-container[b-5jxprnwga6]  .sidebar-shell {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        width: 280px; /* Fixed width when open */
    }

    /* Show sidebar when opened */
    .sidebar-container.sidebar-open[b-5jxprnwga6] {
        width: 100%; /* Make container take full width for overlay */
    }

    .sidebar-container.sidebar-open[b-5jxprnwga6]  .sidebar,
    .sidebar-container.sidebar-open[b-5jxprnwga6]  .sidebar-shell {
        transform: translateX(0);
    }

    /* Show overlay when sidebar is open */
    .sidebar-container.sidebar-open .sidebar-overlay[b-5jxprnwga6] {
        opacity: 1;
        pointer-events: all;
    }

    /* Main content should take full width when sidebar is hidden */
    .main-content[b-5jxprnwga6] {
        margin-left: 0;
        padding-left: 20px;
        width: 100%;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .main-content[b-5jxprnwga6] {
        padding: var(--slyd-spacing-md, 16px);
    }
}
/* _content/SLYD.Components/Components/Layout/MainContentShell.razor.rz.scp.css */
/* Main Content Shell - Content area wrapper */
.main-content-shell[b-5qv1zjq2b9] {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-lg, 24px);
}

/* Ensure content flows properly */
.main-content-shell > *[b-5qv1zjq2b9] {
    flex-shrink: 0;
}

/* Allow certain elements to grow */
.main-content-shell > .flex-grow[b-5qv1zjq2b9],
.main-content-shell > [data-flex-grow][b-5qv1zjq2b9] {
    flex-grow: 1;
}
/* _content/SLYD.Components/Components/Layout/SidebarShell.razor.rz.scp.css */
/* Sidebar Shell - Glass morphism sidebar container */
.sidebar-shell[b-06nqrrs139] {
    --sidebar-width: 280px;

    width: var(--sidebar-width);
    height: 100%;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(15, 23, 42, 0.85) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10;
    transition: transform var(--slyd-transition, 0.3s ease);
}

/* Custom scrollbar for sidebar */
.sidebar-shell[b-06nqrrs139]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-shell[b-06nqrrs139]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-shell[b-06nqrrs139]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-shell[b-06nqrrs139]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar */
.sidebar-shell[b-06nqrrs139] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* ===========================================
   Sidebar Navigation - Default Styles
   These provide sensible defaults for nav content.
   Projects can override with their own NavMenu.razor.css
   =========================================== */

/* Navigation container */
[b-06nqrrs139] .sidebar-nav {
    flex: 1;
    padding: var(--slyd-spacing-md, 16px) 0;
    overflow-y: auto;
}

/* Nav sections stack vertically */
[b-06nqrrs139] .nav-section {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--slyd-spacing-lg, 24px);
}

[b-06nqrrs139] .nav-section-title {
    padding: 0 var(--slyd-spacing-md, 16px);
    margin-bottom: var(--slyd-spacing-sm, 8px);
    font-size: var(--slyd-font-size-xs, 0.75rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    color: var(--slyd-text-secondary, rgba(248, 250, 252, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Nav item base styles */
[b-06nqrrs139] .nav-item {
    display: flex;
    align-items: center;
    padding: var(--slyd-spacing-sm, 10px) var(--slyd-spacing-md, 16px);
    margin: 2px var(--slyd-spacing-sm, 8px);
    border-radius: var(--slyd-radius-md, 8px);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
    text-decoration: none;
    transition: all var(--slyd-transition, 0.3s ease);
    cursor: pointer;
    border-left: 3px solid transparent;
}

[b-06nqrrs139] .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--slyd-text, #F8FAFC);
}

[b-06nqrrs139] .nav-item.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--slyd-primary, #6366F1);
    border-left-color: var(--slyd-primary, #6366F1);
}

/* Nav icon base */
[b-06nqrrs139] .nav-icon {
    width: 32px;
    height: 32px;
    margin-right: var(--slyd-spacing-sm, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--slyd-radius-md, 8px);
    font-size: var(--slyd-font-size-sm, 0.875rem);
    transition: all var(--slyd-transition, 0.3s ease);
    background: rgba(99, 102, 241, 0.15);
    color: var(--slyd-primary, #6366F1);
}

[b-06nqrrs139] .nav-item:hover .nav-icon {
    transform: scale(1.05);
}

[b-06nqrrs139] .nav-item.active .nav-icon {
    background: rgba(99, 102, 241, 0.25);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

/* Nav text */
[b-06nqrrs139] .nav-text {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    font-weight: var(--slyd-font-weight-medium, 500);
}

/* Sidebar header */
[b-06nqrrs139] .sidebar-header {
    padding: var(--slyd-spacing-md, 16px);
    text-align: center;
    border-bottom: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
}

[b-06nqrrs139] .sidebar-title {
    font-size: var(--slyd-font-size-lg, 1.125rem);
    font-weight: var(--slyd-font-weight-bold, 700);
    color: var(--slyd-text, #F8FAFC);
    margin-bottom: var(--slyd-spacing-xs, 4px);
}

[b-06nqrrs139] .sidebar-subtitle {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sidebar logo */
[b-06nqrrs139] .sidebar-logo {
    padding: var(--slyd-spacing-lg, 24px) var(--slyd-spacing-lg, 24px) var(--slyd-spacing-md, 16px);
    border-bottom: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
    display: flex;
    justify-content: center;
}

[b-06nqrrs139] .sidebar-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-06nqrrs139] .sidebar-logo img {
    max-width: 100%;
    height: auto;
}

/* Sidebar footer */
[b-06nqrrs139] .sidebar-footer {
    padding: var(--slyd-spacing-md, 16px);
    border-top: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
    margin-top: auto;
}

[b-06nqrrs139] .footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--slyd-font-size-xs, 0.75rem);
}

[b-06nqrrs139] .footer-label {
    color: var(--slyd-text-secondary, rgba(248, 250, 252, 0.5));
}

[b-06nqrrs139] .footer-value {
    color: var(--slyd-secondary, #10B981);
    font-weight: var(--slyd-font-weight-medium, 500);
}
/* _content/SLYD.Components/Components/Loading/LoadingPanel.razor.rz.scp.css */
#app-loading-panel[b-qoocugmffk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

#app-loading-panel.hidden[b-qoocugmffk] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-logo[b-qoocugmffk] {
    margin-bottom: 32px;
    height: 48px;
    width: auto;
}

.loading-logo-text[b-qoocugmffk] {
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 4px;
}

.loading-spinner[b-qoocugmffk] {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-top: 5px solid #6366f1;
    border-radius: 50%;
    animation: loading-panel-spin-b-qoocugmffk 1s linear infinite;
}

.loading-text[b-qoocugmffk] {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@keyframes loading-panel-spin-b-qoocugmffk {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* _content/SLYD.Components/Components/Modal/Modal.razor.rz.scp.css */
/* Modal Backdrop - Full-screen overlay with centering */
.modal-backdrop[b-6cggv9tmq4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-6cggv9tmq4 0.2s ease;
}

@keyframes fadeIn-b-6cggv9tmq4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Dialog - The actual modal container */
.modal-dialog[b-6cggv9tmq4] {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-6cggv9tmq4 0.3s ease;
}

@keyframes slideUp-b-6cggv9tmq4 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Size variants */
.modal-sm[b-6cggv9tmq4] {
    max-width: 400px;
}

.modal-md[b-6cggv9tmq4] {
    max-width: 600px;
}

.modal-lg[b-6cggv9tmq4] {
    max-width: 800px;
}

.modal-xl[b-6cggv9tmq4] {
    max-width: 1200px;
}

.modal-full[b-6cggv9tmq4] {
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
}

/* Modal Header */
.modal-header[b-6cggv9tmq4] {
    padding: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, hsla(186, 94%, 43%, 0.2) 0%, hsla(188, 86%, 53%, 0.2) 100%);
    border-radius: 16px 16px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-6cggv9tmq4] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.close-button[b-6cggv9tmq4] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 18px;
}

.close-button:hover[b-6cggv9tmq4] {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.close-button:focus-visible[b-6cggv9tmq4] {
    outline: 2px solid var(--slyd-primary-light);
    outline-offset: 2px;
}

/* Modal Body */
.modal-body[b-6cggv9tmq4] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
}

/* Custom scrollbar for modal body */
.modal-body[b-6cggv9tmq4]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-6cggv9tmq4]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-body[b-6cggv9tmq4]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.modal-body[b-6cggv9tmq4]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal Footer */
.modal-footer[b-6cggv9tmq4] {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 0 0 16px 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-backdrop[b-6cggv9tmq4] {
        padding: 10px;
    }

    .modal-dialog[b-6cggv9tmq4] {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 12px;
    }

    .modal-header[b-6cggv9tmq4] {
        padding: 1.5rem;
    }

    .modal-title[b-6cggv9tmq4] {
        font-size: 1.5rem;
    }

    .modal-body[b-6cggv9tmq4] {
        padding: 1.5rem;
    }

    .modal-footer[b-6cggv9tmq4] {
        padding: 1rem 1.5rem;
        flex-direction: column;
    }

    .modal-footer > *[b-6cggv9tmq4] {
        width: 100%;
    }

    /* Smaller size variants on mobile */
    .modal-sm[b-6cggv9tmq4],
    .modal-md[b-6cggv9tmq4],
    .modal-lg[b-6cggv9tmq4],
    .modal-xl[b-6cggv9tmq4] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-header[b-6cggv9tmq4] {
        padding: 1rem;
    }

    .modal-title[b-6cggv9tmq4] {
        font-size: 1.25rem;
    }

    .modal-body[b-6cggv9tmq4] {
        padding: 1rem;
    }

    .modal-footer[b-6cggv9tmq4] {
        padding: 1rem;
    }

    .close-button[b-6cggv9tmq4] {
        top: 1rem;
        right: 1rem;
        width: 32px;
        height: 32px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop[b-6cggv9tmq4],
    .modal-dialog[b-6cggv9tmq4] {
        animation: none;
    }

    .close-button[b-6cggv9tmq4] {
        transition: none;
    }
}
/* _content/SLYD.Components/Components/Particles/ParticlesBackground.razor.rz.scp.css */
/* ParticlesBackground - Animated particle canvas */

#particles-js[b-eh6q6pydtd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#particles-js canvas[b-eh6q6pydtd] {
    display: block;
}
/* _content/SLYD.Components/Components/Reconnect/ReconnectPanel.razor.rz.scp.css */
/* ReconnectPanel - Blazor Server reconnection modal */

#components-reconnect-modal[b-w8zp1i7fwg] {
    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;
    border: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

#components-reconnect-modal[open][b-w8zp1i7fwg] {
    display: flex;
}

#components-reconnect-modal[b-w8zp1i7fwg]::backdrop {
    background-color: rgba(2, 6, 23, 0.4);
    backdrop-filter: blur(3px);
}

.reconnect-content[b-w8zp1i7fwg] {
    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: #f8fafc;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    backdrop-filter: blur(10px);
}

.reconnect-spinner[b-w8zp1i7fwg] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: reconnect-spin-b-w8zp1i7fwg 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes reconnect-spin-b-w8zp1i7fwg {
    to { transform: rotate(360deg); }
}

#components-reconnect-modal h5[b-w8zp1i7fwg] {
    margin: 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

#components-reconnect-modal p[b-w8zp1i7fwg] {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    color: white;
}

#components-reconnect-modal button[b-w8zp1i7fwg] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
}

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

/* Legacy class-based visibility (for older Blazor versions) */
#components-reconnect-modal.components-reconnect-show[b-w8zp1i7fwg],
#components-reconnect-modal.components-reconnect-failed[b-w8zp1i7fwg],
#components-reconnect-modal.components-reconnect-rejected[b-w8zp1i7fwg] {
    display: flex;
}

#components-reconnect-modal.components-reconnect-hide[b-w8zp1i7fwg] {
    display: none;
}
/* _content/SLYD.Components/Components/Stats/MetricCard.razor.rz.scp.css */
/* MetricCard Component Styles */
.metric-card[b-mj71cz5rld] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-lg, 20px);
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-md, 16px);
    transition: background 0.2s ease, border-color 0.2s ease;
    animation: metricFadeIn-b-mj71cz5rld 0.3s ease-out;
}

@keyframes metricFadeIn-b-mj71cz5rld {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.metric-card:hover[b-mj71cz5rld] {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Icon Styling */
.metric-icon[b-mj71cz5rld] {
    width: 48px;
    height: 48px;
    border-radius: var(--slyd-radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--slyd-transition, 0.3s ease);
}

.metric-icon i[b-mj71cz5rld] {
    font-size: 24px;
}

.metric-card:hover .metric-icon[b-mj71cz5rld] {
    transform: scale(1.05);
}

/* Content Section */
.metric-content[b-mj71cz5rld] {
    flex: 1;
    min-width: 0;
}

.metric-value[b-mj71cz5rld] {
    font-size: var(--slyd-font-size-3xl, 28px);
    font-weight: var(--slyd-font-weight-bold, 700);
    color: var(--slyd-text, #F8FAFC);
    margin-bottom: var(--slyd-spacing-xs, 4px);
    line-height: 1.2;
}

.metric-label[b-mj71cz5rld] {
    font-size: var(--slyd-font-size-sm, 14px);
    color: var(--slyd-text-muted, #94A3B8);
}

/* Color Variants - Primary (Blue) */
.metric-card-primary .metric-icon[b-mj71cz5rld] {
    background: rgba(0, 123, 255, 0.1);
}

.metric-card-primary .metric-icon i[b-mj71cz5rld] {
    color: #007BFF;
}

.metric-card-primary:hover[b-mj71cz5rld] {
    border-color: rgba(0, 123, 255, 0.2);
}

/* Color Variants - Secondary (Green) */
.metric-card-secondary .metric-icon[b-mj71cz5rld] {
    background: rgba(16, 185, 129, 0.1);
}

.metric-card-secondary .metric-icon i[b-mj71cz5rld] {
    color: var(--slyd-secondary, #10B981);
}

.metric-card-secondary:hover[b-mj71cz5rld] {
    border-color: rgba(16, 185, 129, 0.2);
}

/* Color Variants - Tertiary (Pink) */
.metric-card-tertiary .metric-icon[b-mj71cz5rld] {
    background: rgba(236, 72, 153, 0.1);
}

.metric-card-tertiary .metric-icon i[b-mj71cz5rld] {
    color: var(--slyd-tertiary, #EC4899);
}

.metric-card-tertiary:hover[b-mj71cz5rld] {
    border-color: rgba(236, 72, 153, 0.2);
}

/* Color Variants - Success (Green) */
.metric-card-success .metric-icon[b-mj71cz5rld] {
    background: rgba(34, 197, 94, 0.1);
}

.metric-card-success .metric-icon i[b-mj71cz5rld] {
    color: var(--slyd-success-light, #22C55E);
}

.metric-card-success:hover[b-mj71cz5rld] {
    border-color: rgba(34, 197, 94, 0.2);
}

/* Color Variants - Warning (Yellow/Amber) */
.metric-card-warning .metric-icon[b-mj71cz5rld] {
    background: rgba(251, 191, 36, 0.1);
}

.metric-card-warning .metric-icon i[b-mj71cz5rld] {
    color: var(--slyd-warning, #FBBF24);
}

.metric-card-warning:hover[b-mj71cz5rld] {
    border-color: rgba(251, 191, 36, 0.2);
}

/* Color Variants - Error (Red) */
.metric-card-error .metric-icon[b-mj71cz5rld] {
    background: rgba(239, 68, 68, 0.1);
}

.metric-card-error .metric-icon i[b-mj71cz5rld] {
    color: var(--slyd-error-light, #EF4444);
}

.metric-card-error:hover[b-mj71cz5rld] {
    border-color: rgba(239, 68, 68, 0.2);
}

/* Color Variants - Info (Purple/Indigo) */
.metric-card-info .metric-icon[b-mj71cz5rld] {
    background: rgba(99, 102, 241, 0.1);
}

.metric-card-info .metric-icon i[b-mj71cz5rld] {
    color: var(--slyd-primary, #6366F1);
}

.metric-card-info:hover[b-mj71cz5rld] {
    border-color: rgba(99, 102, 241, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .metric-value[b-mj71cz5rld] {
        font-size: var(--slyd-font-size-2xl, 24px);
    }
}
/* _content/SLYD.Components/Components/Stats/MetricCardGrid.razor.rz.scp.css */
/* MetricCardGrid - Responsive auto-fit grid container */
.metric-card-grid[b-cejgwneg38] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width, 250px), 1fr));
    gap: var(--slyd-spacing-lg, 20px);
    margin-bottom: var(--slyd-spacing-xl, 30px);
}

/* Single column on mobile */
@media (max-width: 576px) {
    .metric-card-grid[b-cejgwneg38] {
        grid-template-columns: 1fr;
    }
}
/* _content/SLYD.Components/Components/Stats/StatCard.razor.rz.scp.css */
/* StatCard Component Styles */
.stat-card[b-wci4b30tds] {
    background: var(--slyd-card-bg, rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--slyd-radius-lg, 12px);
    padding: var(--slyd-spacing-lg, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-md, 16px);
    transition: all var(--slyd-transition, 0.3s ease);
}

.stat-card:hover[b-wci4b30tds] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Content Layout */
.stat-card-content[b-wci4b30tds] {
    display: flex;
    align-items: flex-start;
    gap: var(--slyd-spacing-md, 16px);
}

/* Icon Styling */
.stat-card-icon[b-wci4b30tds] {
    width: 48px;
    height: 48px;
    border-radius: var(--slyd-radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all var(--slyd-transition, 0.3s ease);
}

.stat-card:hover .stat-card-icon[b-wci4b30tds] {
    transform: scale(1.05);
}

/* Info Section */
.stat-card-info[b-wci4b30tds] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--slyd-spacing-xs, 4px);
    min-width: 0;
}

.stat-card-title[b-wci4b30tds] {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    font-weight: var(--slyd-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
}

.stat-card-value[b-wci4b30tds] {
    font-size: var(--slyd-font-size-2xl, 1.5rem);
    font-weight: var(--slyd-font-weight-bold, 700);
    font-family: var(--slyd-font-family-mono, 'JetBrains Mono', monospace);
    color: var(--slyd-text, #F8FAFC);
    line-height: 1.2;
}

.stat-card-subtitle[b-wci4b30tds] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    color: var(--slyd-text-secondary, rgba(248, 250, 252, 0.5));
}

/* Trend Indicator */
.stat-card-trend[b-wci4b30tds] {
    display: flex;
    align-items: center;
    gap: var(--slyd-spacing-xs, 4px);
    padding: var(--slyd-spacing-xs, 4px) var(--slyd-spacing-sm, 8px);
    border-radius: var(--slyd-radius-full, 9999px);
    font-size: var(--slyd-font-size-xs, 0.75rem);
    font-weight: var(--slyd-font-weight-medium, 500);
}

.stat-card-trend.trend-up[b-wci4b30tds] {
    background: var(--slyd-success-bg, rgba(34, 197, 94, 0.15));
    color: var(--slyd-success-light, #22C55E);
}

.stat-card-trend.trend-down[b-wci4b30tds] {
    background: var(--slyd-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--slyd-error-light, #EF4444);
}

/* Progress Bar */
.stat-card-progress[b-wci4b30tds] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--slyd-radius-full, 9999px);
    overflow: hidden;
}

.stat-card-progress-bar[b-wci4b30tds] {
    height: 100%;
    border-radius: var(--slyd-radius-full, 9999px);
    transition: width 0.5s ease;
}

.stat-card-progress-label[b-wci4b30tds] {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    color: var(--slyd-text-muted, rgba(248, 250, 252, 0.7));
}

/* Footer */
.stat-card-footer[b-wci4b30tds] {
    padding-top: var(--slyd-spacing-md, 16px);
    border-top: 1px solid var(--slyd-border, rgba(255, 255, 255, 0.1));
}

/* Color Variants - Primary (Purple) */
.stat-card-primary .stat-card-icon[b-wci4b30tds] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--slyd-primary, #6366F1);
}

.stat-card-primary:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.stat-card-primary .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-primary, #6366F1), var(--slyd-primary-light, #818CF8));
}

/* Color Variants - Secondary (Green) */
.stat-card-secondary .stat-card-icon[b-wci4b30tds] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--slyd-secondary, #10B981);
}

.stat-card-secondary:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.stat-card-secondary .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-secondary, #10B981), var(--slyd-success-light, #22C55E));
}

/* Color Variants - Tertiary (Pink) */
.stat-card-tertiary .stat-card-icon[b-wci4b30tds] {
    background: rgba(236, 72, 153, 0.15);
    color: var(--slyd-tertiary, #EC4899);
}

.stat-card-tertiary:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

.stat-card-tertiary .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-tertiary, #EC4899), #F472B6);
}

/* Color Variants - Success (Green) */
.stat-card-success .stat-card-icon[b-wci4b30tds] {
    background: var(--slyd-success-bg, rgba(34, 197, 94, 0.15));
    color: var(--slyd-success-light, #22C55E);
}

.stat-card-success:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.stat-card-success .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-success, #15803D), var(--slyd-success-light, #22C55E));
}

/* Color Variants - Warning (Yellow) */
.stat-card-warning .stat-card-icon[b-wci4b30tds] {
    background: var(--slyd-warning-bg, rgba(251, 191, 36, 0.15));
    color: var(--slyd-warning, #FBBF24);
}

.stat-card-warning:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.stat-card-warning .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-warning, #FBBF24), #FCD34D);
}

/* Color Variants - Error (Red) */
.stat-card-error .stat-card-icon[b-wci4b30tds] {
    background: var(--slyd-error-bg, rgba(239, 68, 68, 0.15));
    color: var(--slyd-error-light, #EF4444);
}

.stat-card-error:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.stat-card-error .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-error, #DC2626), var(--slyd-error-light, #EF4444));
}

/* Color Variants - Info (Blue) */
.stat-card-info .stat-card-icon[b-wci4b30tds] {
    background: var(--slyd-info-bg, rgba(59, 130, 246, 0.15));
    color: var(--slyd-info-light, #60A5FA);
}

.stat-card-info:hover .stat-card-icon[b-wci4b30tds] {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.stat-card-info .stat-card-progress-bar[b-wci4b30tds] {
    background: linear-gradient(90deg, var(--slyd-info, #3B82F6), var(--slyd-info-light, #60A5FA));
}
/* _content/SLYD.Components/Components/Stats/StatCardGrid.razor.rz.scp.css */
/* StatCardGrid - Responsive grid container */
.stat-card-grid[b-nhahlq7t8x] {
    display: grid;
    gap: var(--slyd-spacing-md, 16px);
    margin-bottom: var(--slyd-spacing-lg, 24px);
}

/* 4 columns (default) */
.stat-card-grid.grid-cols-4[b-nhahlq7t8x] {
    grid-template-columns: repeat(4, 1fr);
}

/* 3 columns */
.stat-card-grid.grid-cols-3[b-nhahlq7t8x] {
    grid-template-columns: repeat(3, 1fr);
}

/* 2 columns */
.stat-card-grid.grid-cols-2[b-nhahlq7t8x] {
    grid-template-columns: repeat(2, 1fr);
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .stat-card-grid.grid-cols-4[b-nhahlq7t8x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card-grid.grid-cols-3[b-nhahlq7t8x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stat-card-grid.grid-cols-4[b-nhahlq7t8x],
    .stat-card-grid.grid-cols-3[b-nhahlq7t8x],
    .stat-card-grid.grid-cols-2[b-nhahlq7t8x] {
        grid-template-columns: 1fr;
    }
}