body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

    body.dark-mode table {
        background-color: #1e1e1e !important;
        color: #ffffff !important;
    }

    body.dark-mode .top-nav, body.dark-mode .sidebar, body.dark-mode .footer {
        background-color: #1f1f1f !important;
        color: white !important;
    }

    body.dark-mode .dropdown-menu {
        background-color: #333333 !important;
        color: white !important;
    }

        body.dark-mode .dropdown-menu .dropdown-item {
            color: white !important;
        }

            body.dark-mode .dropdown-menu .dropdown-item:hover {
                background-color: #444444 !important;
            }

    body.dark-mode .btn {
        background-color: #555555 !important;
        color: white !important;
    }
/* Header Styling */
.page-header {
    background-color: #002147; /* Dark blue */
    color: white;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid #ffc107; /* Optional accent color */
}

    .page-header .header-left {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 20px;
        font-weight: bold;
    }

    .page-header .header-right {
        display: flex;
        align-items: center;
        gap: 25px;
        font-size: 18px;
    }

.header-icon {
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .header-icon:hover {
        color: #ffc107; /* Accent color on hover */
    }

.main-content {
    margin-top: 90px; /*Adjust depending on navbar height*/
}

.sidebar.collapsed {
    display: none !important;
}

@media (max-width: 768px) {
    .sidebar {
        position: absolute;
        z-index: 1050;
        width: 70%;
        background-color: #1f1f1f;
        height: 100vh;
        overflow-y: auto;
    }
}