/*
	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.
*/

.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;
}

.text-centre {
    text-align: center !important;
}

.footer {
    border-top: 3px solid lightgray;
    bottom: 0;
    color: white;
    text-align: right;
    width: 100%;
}

.assessmentId {
    display: block;
	text-align:right;
}

.documentLinks {
    font-weight: bold;
    text-decoration: underline;
}

.blurredBackground {
    backdrop-filter: blur(10px);
}

.inlineEdit .mud-input,
.inlineEdit > .mud-input-control-input-container,
.inlineEdit .mud-input-control > .mud-input-control-input-container > label > p {
    font-size: 0.8rem; /* 1 rem is default */
}

.vert-menu .mud-icon-root.mud-svg-icon {
    color: white !important;
}

.vert-menu {
    padding-left:12px;
}


/* Navigation button styling for assessment section items */
.assessment-section-item {
    transition: all 0.3s ease;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.assessment-section-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
}


.assessment-section-item .mud-list-item {
    transition: all 0.2s ease;
    border: none !important;
    outline: none !important;
}

.assessment-section-item .mud-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
}

/* Enhanced icon styling with circular background */
.assessment-section-item .mud-icon-root {
    transition: all 0.3s ease;
    background-color: var(--mud-palette-primary);
    color: white !important;
    border-radius: 50%;
    padding: 8px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(var(--mud-palette-primary-rgb), 0.3);
}

.assessment-section-item:hover .mud-icon-root {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(var(--mud-palette-primary-rgb), 0.4);
}


/* Active/Selected state styling */
.assessment-section-item.active {
    border-color: var(--mud-palette-primary);
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.1) 0%, rgba(var(--mud-palette-primary-rgb), 0.05) 100%);
    box-shadow: 0 4px 16px rgba(var(--mud-palette-primary-rgb), 0.2);
}

.assessment-section-item.active .mud-icon-root {
    background-color: var(--mud-palette-primary-darken);
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(var(--mud-palette-primary-rgb), 0.5);
}

/* Focus state for accessibility */
.assessment-section-item .mud-list-item:focus {
    outline: none;
}

.assessment-section-item .mud-list-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Badge styling improvements */
.assessment-section-item .mud-badge {
    transition: all 0.2s ease;
}

.assessment-section-item:hover .mud-badge {
    transform: scale(1.1);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1.1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

/* Email text fitting solutions */

.email-text-responsive {
    font-size: 0.75rem;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block;
    line-height: 1.2;
    transition: font-size 0.2s ease;
}

.custom-container {
    max-width: 1440px !important;
    margin: 0 auto;
}