/* General Body Styling */
body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    flex-direction: column;
    background-color: #fff; /* Light background color for the body */
}

/* Sidebar Styling */
.sidebar {
    width: 250px;
    background-color: #343a40; /* Dark background for the sidebar */
    padding: 15px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: #ffffff; /* Ensuring white text color */
}

/* Content Area Styling */
.content {
    margin-left: 250px;
    padding: 15px;
    flex-grow: 1;
    background-color: #ffffff; /* White background for the content area */
    transition: margin-left 0.3s ease;
    color: #333333; /* Dark text color for contrast */
}

/* Navigation Link Styling */
.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #ffffff; /* White text color */
    text-decoration: none;
}

    .nav-link:hover {
        background-color: #495057; /* Slightly lighter background on hover */
        color: #ffffff; /* White text on hover */
    }

    .nav-link i {
        margin-right: 10px;
    }

/* Navbar Brand Styling */
.navbar-brand .app-name {
    font-weight: bold;
    font-size: 1.25rem;
    color: #ffffff; /* Ensure the logo text is white */
}

.form-inline {
    max-width: 300px;
}

/* Dropdown Menu Styling */
.dropdown-menu {
    width: 300px;
    background-color: #ffffff; /* White background for dropdown */
    color: #333333; /* Dark text color for readability */
}

.dropdown-item {
    color: #333333; /* Dark text color */
}

    .dropdown-item:hover {
        background-color: #f8f9fa; /* Light background on hover */
        color: #333333; /* Dark text color on hover */
    }

/* Badge Styling */
.badge {
    font-size: 0.75rem;
    vertical-align: top;
}

img.rounded-circle {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* Responsive Styling for Mobile Devices */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1000;
        top: 0;
        bottom: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }

        .sidebar.show {
            transform: translateX(0);
        }

    .content {
        margin-left: 0;
        padding: 15px;
    }

    .header {
        z-index: 1100;
    }
}

/* Ensure Content Adjusts When Sidebar is Toggled */
@media (min-width: 992px) {
    .sidebar {
        transform: none;
        position: static;
        width: 250px;
    }

    .content {
        margin-left: 250px;
    }
}

/* Footer Styling */
footer {
    background-color: #f8f9fa; /* Light background for footer */
    color: #333333; /* Dark text color */
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #e3e6f0;
}
/* Ensure card headers have the correct background colors */
.card-header {
    background-color: inherit; /* Ensures it inherits the bg-* color */
    color: #ffffff; /* Ensure the text color is white */
}

/* Specific overrides for each card header type */
.bg-primary .card-header {
    background-color: #007bff !important;
}

.bg-success .card-header {
    background-color: #28a745 !important;
}

.bg-warning .card-header {
    background-color: #ffc107 !important;
    color: #212529; /* Dark text for better contrast on yellow */
}

.bg-danger .card-header {
    background-color: #dc3545 !important;
}

/* Additional padding and margins for better layout control */
.p-2 {
    padding: 0.5rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
        align-items: stretch;
    }

        .search-container form {
            width: 100%;
            justify-content: center;
        }

        .search-container input.form-control {
            width: 100%;
        }

        .search-container .btn-primary,
        .search-container .btn-success {
            width: 100%;
            text-align: center;
        }
}
/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
    .search-form {
        width: 100%; /* Full width on small screens */
        max-width: none;
    }

    .container.mt-5 {
        padding: 10px;
    }
}