/* dark-mode.css or main CSS file */
.theme-toggle {
    display: flex;
    align-items: center;
    margin-left: 15px; /* Maintain spacing from the previous items */
}

.theme-btn {
    display: block;
    padding: 10px 15px 6px 15px; /* Match padding of navbar items */
    line-height: 19px; /* Ensure proper vertical alignment */
    height: 37px; /* Match the height of navbar items */
    color: #ffffff; /* Match text color of navbar items */
    background: none; /* Ensure background matches navbar items */
    border: none; /* No border like navbar items */
    cursor: pointer; /* Pointer cursor for button */
    text-decoration: none; /* Ensure text decoration matches */
    font-size: 12px; /* Match font size of navbar items */
}

.theme-btn.light .fa-sun {
    color: #f39c12; /* Sun icon color */
}

.theme-btn.dark .fa-moon {
    color: #ffffff; /* Moon icon color */
}

/* Ensure icons are the same size as navbar items */
.theme-btn .fa-sun,
.theme-btn .fa-moon {
    font-size: 16px; /* Adjust icon size to fit within the button */
    line-height: inherit; /* Match line-height of navbar icons */
    vertical-align: middle; /* Center icons vertically if needed */
}

/* Optional: Add hover and focus styles for better UX */
.theme-btn:hover,
.theme-btn:focus {
    background: rgba(0,0,0,0.15); /* Match the hover effect of navbar items */
    color: #ffffff; /* Ensure text color matches */
    text-decoration: none; /* Remove text decoration on hover/focus */
}





.modal-content {
    position: relative;
    background-color: #333; /* Dark background color */
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border for dark mode */
    border-radius: 0.3rem;
    outline: 0;
    color: #fff; /* Text color for dark mode */
}

.modal-header, .modal-body, .modal-footer {
    background-color: #333; /* Match the background of the modal content */
    color: #fff; /* Text color for readability */
}

.modal-header .modal-title {
    color: #fff; /* Title color for dark mode */
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border for dark mode */
}

/* Optional: Adjust button colors inside the modal */
.modal-footer .btn {
    background-color: #555; /* Button background for dark mode */
    color: #fff; /* Button text color */
}

.modal-footer .btn:hover {
    background-color: #777; /* Hover effect for buttons */
}








/* General table styling in dark mode */
.dark-mode .table {
    background-color: #333; /* Dark background color for tables */
    color: #fff; /* Text color for readability */
}

/* Table rows and cells in dark mode */
.dark-mode .table tbody tr {
    background-color: #444; /* Slightly lighter dark background for rows */
}

.dark-mode .table tbody tr:nth-of-type(odd) {
    background-color: #555; /* Alternate row color for better contrast */
}

/* Optional: Styling for table headers in dark mode */
.dark-mode .table thead th {
    background-color: #222; /* Darker background for table headers */
    color: #fff; /* Text color for headers */
}

/* Optional: Adjust borders and lines in dark mode */
.dark-mode .table-bordered {
    border-color: #444; /* Darker border color for the table */
}

.dark-mode .table-bordered td,
.dark-mode .table-bordered th {
    border-color: #444; /* Darker border color for cells */
}

/* Optional: Hover effects for table rows in dark mode */
.dark-mode .table tbody tr:hover {
    background-color: #666; /* Highlight color on hover */
}

/* Ensure default (light mode) table styles remain unchanged */
.table {
    background-color: #fff; /* Light background color for tables */
    color: #000; /* Text color for readability */
}

.table tbody tr {
    background-color: #fff; /* Default background color for rows */
}

.table tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa; /* Default alternate row color */
}

.table thead th {
    background-color: #e9ecef; /* Default background color for table headers */
    color: #000; /* Text color for headers */
}

.table-bordered {
    border-color: #dee2e6; /* Default border color for the table */
}

.table-bordered td,
.table-bordered th {
    border-color: #dee2e6; /* Default border color for cells */
}

.table tbody tr:hover {
    background-color: #e2e6ea; /* Default highlight color on hover */
}





/* Dark mode styles for card headers */
.dark-mode .card-header.card-header-inverse {
    color: #fff; /* Text color for card headers in dark mode */
    background-color: #333; /* Dark background color for card headers */
}

/* Default (light mode) styles for card headers */
.card-header.card-header-inverse {
    color: #000; /* Text color for card headers in light mode */
    background-color: #f8f9fa; /* Light background color for card headers */
}


/* Dark Mode Styles */
body.dark-mode .card-header.card-header-info {
    background: #5a3c8e; /* Darker shade of purple for dark mode */
    border-bottom: 1px solid #444444; /* Darker border */
    color: #ffffff; /* Ensure text color is white for contrast */
}


/* Dark Mode Styles */
body.dark-mode .easy-autocomplete-container ul {
    background-color: #2c2c2c; /* Dark background color */
    border-top: 1px dotted #444444; /* Darker border */
    color: #ffffff; /* White text color for readability */
}