/* 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: #003366 !important; /* Dark Blue */
    color: #ffffff !important; /* White text */
    min-height: 100vh;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 240px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

    .sidebar .nav-item {
        margin: 10px 0;
    }

        .sidebar .nav-item a {
            color: #ffffff !important;
            font-weight: 500;
            padding: 10px;
            display: block;
            border-radius: 6px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

            .sidebar .nav-item a:hover,
            .sidebar .nav-item a.active {
                background-color: #002244; /* Slightly darker for hover/active */
                color: #FFCC00; /* Accent yellow */
            }

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