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

.modal {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}


/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

    /* Anytime the body has the loading class, our
   modal element will be visible */
    body.loading .modal {
        display: block;
    }

    /* Left navigation readability after MudBlazor v9 upgrade */
    .app-side-drawer .mud-drawer-content {
        background-color: #f5f7fb;
        color: #1f2937;
    }

    .app-side-drawer .mud-nav-link,
    .app-side-drawer .mud-nav-link .mud-nav-link-text,
    .app-side-drawer .mud-nav-group .mud-nav-link-text,
    .app-side-drawer .mud-nav-group .mud-nav-link-icon {
        color: #1f2937;
    }

    .app-side-drawer .mud-nav-link.active,
    .app-side-drawer .mud-nav-group.active > .mud-nav-link {
        background-color: #dbeafe;
        color: #0b3f8a;
        border-radius: 8px;
    }

    /* Chart labels and descriptions visibility */
    .mud-chart-responsive {
        overflow: visible !important;
    }

    .doc-section-component-container {
        overflow: visible !important;
        overflow-x: auto !important;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Ensure SVG labels are not clipped */
    .mud-chart-responsive svg {
        overflow: visible !important;
    }

    /* Ensure text elements in charts are visible */
    .mud-chart-responsive text,
    .mud-chart-responsive tspan {
        overflow: visible !important;
    }

    /* MudPaper with charts - ensure space for axis labels */
    .mud-paper {
        overflow: visible !important;
    }

    /* Specific padding for grid items with charts */
    .mud-grid .mud-item {
        overflow: visible !important;
    }