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

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

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

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

.custom-paper {
    border-left: 4px solid var(--mud-palette-primary) !important;
}

.align-items-center {
    align-items: center;
}
.error-boundary {
    border: 1px solid red;
    padding: 1rem;
    background-color: #ffe6e6;
    color: #a94442;
}
/* Add these styles at the end of the file */

.mud-error {
    border-left: 3px solid var(--mud-palette-error);
    background-color: var(--mud-palette-error-hover);
    color: var(--mud-palette-error-text);
}

/* Override the default blazor-error-ui styling to hide it by default */
#blazor-error-ui {
    display: none;
}

/* Rest of the existing styles remain unchanged */

/* Usando los colores exactos de tu ClientTheme dark */
.mud-theme-dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.mud-theme-dark ::-webkit-scrollbar-track {
    background: #121518; /* Tu Background dark */
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: #222529; /* Tu Surface dark */
    border-radius: 5px;
}

    .mud-theme-dark ::-webkit-scrollbar-thumb:hover {
        background: #2a2f35; /* Ligeramente más claro */
    }

.mud-theme-dark ::-webkit-scrollbar-corner {
    background: #121518;
}
.mud-theme-dark ::-webkit-scrollbar-thumb:active {
    background: #323742; /* Más claro para active */
}
.dialog-background {
    background-color: var(--mud-palette-background);
}
/* Clase auxiliar para glassmorphism en cualquier elemento */
.sweet-glass-effect {
    background: rgba(37, 40, 58, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(74, 77, 102, 0.4);
    border-radius: 12px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.4);
}