/* ✅ Fancy Dark Mode Toggle Button */
.dark-mode-toggle {
    background: linear-gradient(135deg, #222, #444);
    color: #ffcc00;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #ffcc00;
    padding: 10px 18px;
    border-radius: 25px; /* Rounded button */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    outline: none;
}

    .dark-mode-toggle:hover {
        background: linear-gradient(135deg, #333, #555);
        color: #ffdd55;
        transform: scale(1.05); /* Slight hover animation */
    }

.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #444, #666);
    color: #ffdd55;
    border: 2px solid #c8a500;
}

    .dark-mode .dark-mode-toggle:hover {
        background: linear-gradient(135deg, #555, #777);
        color: #ffcc00;
    }

/* ✅ General Dark Mode Background */
.dark-mode {
    background-color: #121212;
    color: #e0e0e0; /* Light gray text for contrast */
}

    /* ✅ Fix Navbar Background & Text */
    .dark-mode .navbar {
        background-color: #181818 !important; /* Force dark mode */
        border-bottom: 2px solid #c8a500; /* Soft gold bottom border */
    }

        /* ✅ Fix Navbar Brand ("Home") */
        .dark-mode .navbar .navbar-brand {
            color: #c8a500 !important;
            font-weight: 600;
        }

            .dark-mode .navbar .navbar-brand:hover {
                color: #ffcc00 !important;
            }

        /* ✅ Fix Navbar Links */
        .dark-mode .navbar .nav-link {
            color: #c8a500 !important;
            font-weight: 500;
        }

            .dark-mode .navbar .nav-link:hover {
                color: #ffcc00 !important;
            }

        /* ✅ Fix Navbar Active Link */
        .dark-mode .navbar .nav-item.active .nav-link {
            color: #ffcc00 !important;
            font-weight: 600;
        }

/* ✅ Remove border & background from Navbar Toggler */
.navbar-toggler {
    border: none !important; /* Remove border */
    background: transparent !important; /* Transparent background */
    padding: 5px; /* Slight padding for spacing */
}

/* ✅ Ensure the Navbar Toggle Icon (☰) is Visible */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    width: 24px;
    height: 24px;
}

/* ✅ Fix Navbar Toggle Button in Dark Mode */
.dark-mode .navbar-toggler {
    border: none !important; /* No border */
    background-color: transparent !important; /* Transparent background */
}

/* ✅ Make sure the Navbar Toggle Icon (☰) is White in Dark Mode */
.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    color: white !important;
}

/* ✅ Fix Dropdown Menu */
.dark-mode .dropdown-menu {
    background-color: #1f1f1f !important;
    border: 1px solid #c8a500;
}

.dark-mode .dropdown-item {
    color: #ffffff !important;
}

    .dark-mode .dropdown-item:hover {
        background-color: #333 !important;
        color: #ffcc00 !important;
    }

/* ✅ Tables - Dark Mode Fix */
.dark-mode table {
    color: #e0e0e0 !important;
    background-color: #1f1f1f;
    border-color: #444;
    width: 100%;
}

/* ✅ Table Headers */
.dark-mode thead th {
    color: #ffcc00;
    background-color: #252525;
    border-bottom: 2px solid #c8a500;
    padding: 10px;
    text-align: left;
}

/* ✅ Table Rows */
.dark-mode tbody tr {
    color: #e0e0e0 !important;
    background-color: #2a2a2a;
    border-bottom: 1px solid #444;
}

    .dark-mode tbody tr:nth-child(even) {
        background-color: #1e1e1e;
    }

    .dark-mode tbody tr:hover {
        background-color: #3a3a3a;
    }

/* ✅ Input Fields */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: #222;
    color: #e0e0e0;
    border: 1px solid #c8a500;
}

/* ✅ Progress Bars */
.dark-mode .progress {
    background-color: #333;
}

.dark-mode .progress-bar {
    background-color: #ffcc00;
}

/* ✅ Ensure cards, input fields, and buttons are properly styled in dark mode */
.dark-mode .card {
    background-color: #333 !important;
    color: white !important;
    border: 1px solid #555 !important;
}

.dark-mode .form-control {
    background-color: #444 !important;
    color: white !important;
    border: 1px solid #666 !important;
}

.dark-mode .btn {
    background-color: #555 !important;
    color: white !important;
    border: 1px solid #777 !important;
}

.dark-mode .btn-info {
    background-color: #117a8b !important;
    border: 1px solid #0f6c79 !important;
}