/*
	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;
}

.mud-table-cell {
    padding: 3px 6px; /* vertical, horizontal */
}

.page {
    overflow: hidden;
}

.mud-input-label-inputcontrol {
    font-weight: bold !important;
}

.mud-typography-caption {
    font-weight: bold !important;
}

.page-background {
    background-image: var(--app-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.page-background.gradient-bg {
    background-image: linear-gradient(180deg, #F4FAFF 0%, #D6EAF8 100%);
}

/*.dialog-background {
   background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--app-background-color);
}*/

.dialog-background {
    /* 1. Keep your existing background image setup */
    background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    /* 2. Layer a semi-transparent white background color over it */
    /* Alpha value (0.6) = 60% white tint. Increase for a lighter image. */
    background-color: rgba(255, 255, 255, 0.8) !important;
    /* 3. Instruct CSS to blend the white color to lighten the image */
    background-blend-mode: lighten !important;
    backdrop-filter: blur(10px);

}

.mud-dialog {
    background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mud-dialog {
    background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

:root {
    --app-bg-image: url('images/SCRetainBack.png');
        --app-background-color: #E3F2FD;
    
}

.dark-theme {
    --app-bg-image: url('images/SCRetainBack.png');
    --app-background-color: #424242; !important;
}

.mud-data-grid {
    opacity: 0.9;
}