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

@media (max-width: 576px) {
    /* Custom styles for table in mobile view */
    .mud-table {
        display: block;
        width: 100%;
    }

        .mud-table td, .mud-table th {
            display: block;
            width: 100%;
        }
}

@media (max-width: 576px) { /* Mobile view typically less than 768px */
    .responsive-logo {
        width: 150px; /* Smaller width for mobile */
        height: 150px; /* Smaller height for mobile */
    }
}

@media (max-width: 768px) { /* Mobile view typically less than 768px */
    .responsive-logo {
        width: 150px; /* Smaller width for mobile */
        height: 150px; /* Smaller height for mobile */
    }
}


.modern-tabs .mud-tabs-tabbar {
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.modern-tabs .mud-tab {
    border-radius: 9999px !important;
    padding: 10px 18px !important;
    background: white;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .modern-tabs .mud-tab:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .modern-tabs .mud-tab.mud-tab-active {
        background: linear-gradient(135deg, #D72638 0%, #0057B8 100%);
        color: white !important;
        border-color: transparent;
        box-shadow: 0 10px 24px rgba(0, 87, 184, 0.18);
    }

.mud-input-control .mud-input-outlined-border {
    border-radius: 18px !important;
}

.mud-card {
    transition: all 0.3s ease;
}

@media (max-width: 600px) {
    .modern-tabs .mud-tab {
        width: 100%;
        justify-content: center;
    }
}