/* Override existing styles for the Blazor layout based on the logo theming */

/* General styles */
body {
    background-color: #eaf4fc; /* Light blue background color inspired by the logo */
    font-family: 'Montserrat', sans-serif; /* Ensure a clean and modern font */
    color: #003366; /* Primary dark blue for text */
}

/* Header */
header {
    background-color: #003366; /* Deep blue for branding consistency */
    color: #ffffff; /* White text for readability */
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    header a {
        color: #FFCC00; /* Yellow accent color from the logo */
        text-decoration: none;
        font-weight: bold;
    }

        header a:hover {
            color: #e6b800; /* Darker yellow for hover effect */
        }

/* Sidebar */
.sidebar {
    background-color: #005bb5; /* Medium blue for sidebar background */
    color: #ffffff;
    padding: 15px;
    border-right: 2px solid #003366;
}

    .sidebar .nav-item > a {
        color: #ffffff;
        font-weight: 500;
        padding: 10px;
        display: block;
        border-radius: 4px;
        transition: background-color 0.3s;
    }

        .sidebar .nav-item > a:hover {
            background-color: #003366; /* Darker blue for hover */
            color: #FFCC00; /* Accent text color */
        }

/* Main content */
.main-content {
    background-color: #ffffff; /* Clean white background for content */
    color: #003366; /* Text color matching the branding */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
    background-color: #003366; /* Match header for consistency */
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
}

    footer a {
        color: #FFCC00; /* Yellow accent for links */
        text-decoration: none;
    }

        footer a:hover {
            color: #e6b800; /* Hover effect for footer links */
        }

/* Buttons */
button,
.btn {
    background-color: #FFCC00; /* Yellow primary button color */
    color: #003366;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

    button:hover,
    .btn:hover {
        background-color: #e6b800; /* Darker yellow on hover */
    }

/* Links */
a {
    color: #003366; /* Standard text links */
    text-decoration: underline;
}

    a:hover {
        color: #FFCC00; /* Yellow hover color */
    }

/* Notifications */
.notification {
    background-color: #FFCC00; /* Bright yellow for notifications */
    color: #003366;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .notification.show {
        display: block;
    }

/* Forms */
input,
textarea,
select {
    border: 2px solid #003366;
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: #FFCC00; /* Yellow border on focus */
        box-shadow: 0 0 4px #FFCC00;
    }


.loading-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

/* Style the loader image */
.loader {
    max-width: 150px; /* Limit the loader's width */
    width: 100%; /* Make it responsive */
    height: auto; /* Maintain aspect ratio */
}