/* Common Styles (Shared by Light and Dark Modes) */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

header {
    padding: 1rem;
    transition: background-color 0.3s, color 0.3s;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

header nav ul li a {
    text-decoration: none;
    transition: color 0.3s;
}

footer {
    text-align: center;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    transition: background-color 0.3s, color 0.3s;
}

main {
    padding: 2rem;
}

form div {
    margin-bottom: 1rem;
}

/* Sidebar Styles */
#sidebar {
    width: 250px;
    transition: background-color 0.3s, color 0.3s;
}

#main-content {
    width: calc(100% - 250px);
    transition: width 0.3s;
}

#sidebar.collapsed {
    width: 0;
    display: none;
}

#main-content.collapsed {
    width: 100%;
}

#sidebar .components {
    padding-left: 15px;
}

#sidebar .components a {
    text-decoration: none;
    padding: 10px 0;
    display: block;
    transition: color 0.3s;
}

/* Scrollable List Styles */
.scrollable-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    transition: background-color 0.3s, color 0.3s;
}

/* Sidebar Button Container */
#sidebar-button-container {
    background-color: #f4f4f4; /* Light mode default */
    color: #333;
    padding: 1rem;
    border-bottom: 1px solid #ddd; /* Light separator */
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode #sidebartoggle-container {
    background-color: #2c2c2c; /* Dark mode background */
    color: #2c2c2c;
    border-bottom: 1px solid #444; /* Dark separator */
}

/* Sidebar Button */
#sidebar-button {
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    color: inherit; /* Matches parent text color */
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
}

#sidebar-button:hover, #sidebar-button:focus {
    background-color: rgba(0, 0, 0, 0.1);
}

body.dark-mode #sidebar-button:hover,
body.dark-mode #sidebar-button:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Light Mode Styles */
body {
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: white;
}

header nav ul li a {
    color: white;
}

footer {
    background-color: #333;
    color: white;
}

#sidebar {
    background-color: #f4f4f4;
    color: #333;
}

#sidebar .components a {
    color: #333;
}

.scrollable-list {
    background-color: #f4f4f4;
    color: #333;
}
body.light-mode .table {
    background-color: #ffffff; /* Light mode table background */
    color: #000000; /* Light mode text color */
}
/* Dark Mode Styles */
body.dark-mode {
    background-color: #1e1e1e;
    color: #f4f4f4;
}

header.dark-mode {
    background-color: #1e1e1e;
    color: #f4f4f4;
}

header.dark-mode nav ul li a { /**/
    color: #2c2c2c;
}

footer.dark-mode {
    background-color: #1e1e1e;
    color: #f4f4f4;
}

#sidebar.dark-mode {
    background-color: #2c2c2c;
    color: #f4f4f4;
}

#sidebar.dark-mode .components a {
    color: #f4f4f4;
}

.scrollable-list.dark-mode {
    background-color: #2c2c2c;
    color: #f4f4f4;
}
/* Additional dark mode-specific styles */
body.dark-mode nav ul li a {
    color: #b0b0b0;
}
body.dark-mode .table {
    background-color: #2c2c2c; /* Dark mode table background */
    color: #ffffff; /* Dark mode text color */
}

body.dark-mode .sticky-title{
    background-color: #3a3a3a; /* Dark mode sticky header and title */
    color: #ffffff;
}
body.dark-mode .sticky-header th {
    background-color: #3a3a3a; /* Dark mode sticky header and title */
    color: #ffffff;
}

/* Adjusting search box for dark mode */
body.dark-mode #searchBox {
    background-color: #ffffff;
    color: #000;
    border: 1px solid #555555;
}

/* Inventory link adjustments for dark mode */
body.dark-mode .inventory-link {
    color: #62b0ff;
}
body.dark-mode .inventory-link:hover {
    color: #007bff;
}
#sticky-header {
    margin: 0; /* Remove any margin from the sticky header container */
    padding: 0; /* Remove any padding from the sticky header container */
    border-bottom: none;/*1px solid var(--sticky-header-color, #000); /* Optional: Add a separator line */
}

#sticky-title {
    margin: 0; /* Remove default margin from the title */
    padding: 0.5rem; /* Optional: Adjust padding for consistent spacing */
}

#inventoryTable {
    margin: 0; /* Remove default margin from the table */
    padding: 0; /* Remove default padding from the table */

}
#sticky-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--sticky-header-bg, #000);
    color: var(--sticky-header-color, #000);
}

#sticky-title {
    margin: 0;
    padding: 0.5rem;
    font-size: 1.5rem;
}

#sticky-column-headers {
    position: sticky;
    top: 40px; /* Below the sticky title */
    z-index: 1020;
    background-color: var(--sticky-header-bg, #f8f9fa);
    color: var(--sticky-header-color, #000);
}

#inventoryListContainer table thead th {
    text-align: start;
    white-space: normal;

}
/* Light Mode Table Styles */
body:not(.dark-mode) #inventoryTable tbody tr:nth-child(odd) {
    background-color: #f8f9fa; /* Light gray background */
    color: #000000; /* Black text */
}

body:not(.dark-mode) #inventoryTable tbody tr:nth-child(even) {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
}

/* Dark Mode Table Styles */
body.dark-mode #inventoryTable tbody tr:nth-child(odd) {
    background-color: #3a3a3a; /* Darker gray background */
    -webkit-text-fill-color: #ffffff; /* White text */
}

body.dark-mode #inventoryTable tbody tr:nth-child(even) {
    background-color: #2c2c2c; /* Lighter gray background */
    -webkit-text-fill-color: #ffffff; /* White text */
}
/* Remove lines between rows in dark mode */
body.dark-mode #inventoryTable tbody tr {
    border: none; /* Remove borders between rows */
}

/* Optional: Remove cell borders for a cleaner look */
body.dark-mode #inventoryTable tbody td {
    border: none; /* Remove borders between table cells */
}

/* Ensure even rows blend seamlessly */
body.dark-mode #inventoryTable tbody tr:nth-child(even) {
    background-color: #2c2c2c; /* Darker gray for even rows */
}

body.dark-mode #inventoryTable tbody tr:nth-child(odd) {
    background-color: #3a3a3a; /* Lighter gray for odd rows */
}
/* Light mode card styles (default) */
.card {
    background-color: #ffffff; /* White background for cards */
    color: #000000; /* Black text */
    border: 1px solid #ddd; /* Light gray border */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Dark mode card styles */
body.dark-mode .card {
    background-color: #2c2c2c; /* Dark background for cards */
    color: #ffffff; /* White text for dark mode */
    border: 1px solid #444; /* Darker border for cards in dark mode */
}

/* Card text links in dark mode */
body.dark-mode .card a {
    color: #62b0ff; /* Subtle blue for links */
}

body.dark-mode .card a:hover {
    color: #007bff; /* Brighter blue on hover */
}

/* Card body adjustments for dark mode */
body.dark-mode .card-body {
    color: #f4f4f4; /* Light text color */
}
/* Light mode image styles */
.img-thumbnail {
    border: 1px solid #ddd; /* Light gray border for images */
    background-color: #ffffff; /* White background */
    transition: background-color 0.3s, border-color 0.3s;
}

/* Dark mode image styles */
body.dark-mode .img-thumbnail {
    border: 1px solid #444; /* Dark gray border for images */
    background-color: #2c2c2c; /* Match dark mode background */
}
/* Light mode table row styles */
.table tbody tr td {
    color: #000; /* Default black text for light mode */
    background-color: #fff; /* Default white background for table rows */
    transition: background-color 0.3s, color 0.3s;
}

/* Dark mode table row styles */
body.dark-mode .table tbody tr td {
    color: #fff; /* White text for dark mode */
    background-color: #2c2c2c; /* Dark background for table rows */
}

/* Alternating row styles for striping */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05); /* Light gray for light mode */
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05); /* Slightly lighter shade for dark mode */
}

/* Ensure select dropdown matches dark mode */
body.dark-mode select {
    background-color: #3a3a3a; /* Dark dropdown background */
    color: #fff; /* White text for dropdowns in dark mode */
    border: 1px solid #555; /* Adjust border color */
}

/* Ensure buttons match dark mode */
body.dark-mode .btn-primary {
    background-color: #0056b3; /* Adjusted primary button color */
    border-color: #0056b3;
}

body.dark-mode .btn-danger {
    background-color: #b30000; /* Adjusted danger button color */
    border-color: #b30000;
}
/* Light Mode List Group Item Styles */
.list-group-item {
    background-color: #fff; /* Default white background */
    color: #000; /* Black text */
    border: 1px solid #ddd; /* Light border */
    transition: background-color 0.3s, color 0.3s;
}

.list-group-item:hover, .list-group-item:focus {
    background-color: #f8f9fa; /* Slight hover effect */
    color: #000; /* Ensure text remains readable */
}

/* Dark Mode List Group Item Styles */
body.dark-mode .list-group-item {
    background-color: #2c2c2c; /* Dark background */
    color: #fff; /* White text */
    border: 1px solid #444; /* Dark border */
}

body.dark-mode .list-group-item:hover, body.dark-mode .list-group-item:focus {
    background-color: #3a3a3a; /* Slight hover effect for dark mode */
    color: #fff; /* Ensure text remains readable */
}
.export-buttons a {
    margin-right: 10px;
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.export-buttons a:last-child {
    margin-right: 0; /* Remove right margin for the last button */
}

.btn, .form-select {
    height: calc(2.5rem + 2px); /* Uniform height for buttons and dropdown */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.form-select {
    min-width: 180px; /* Ensures consistent width for dropdown */
}

.d-flex > * {
    margin-bottom: 0; /* Ensure no extra margin disrupts alignment */
}

/* Ensure buttons on mobile devices have centered text */
#mobile-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal; /* Reset line-height */
    height: 2.5rem; /* Ensure uniform height */
    text-align: center; /* Center the text */
    padding: 0.375rem 0.75rem; /* Adjust padding */
}


/* ---------------------- */
/*  LIGHT MODE NAVBAR    */
/* ---------------------- */
.navbar-light.bg-light {
    background-color: #f8f9fa !important; /* Default Bootstrap color */
    color: #000 !important;
}

.navbar-light.bg-light h5 {
    color: #000 !important;
}

/* If you have links in the navbar, you can style them here: */
.navbar-light.bg-light .navbar-nav .nav-link {
    color: #000 !important;
}

/* ---------------------- */
/*   DARK MODE OVERRIDES  */
/* ---------------------- */
body.dark-mode .navbar-light.bg-light {
    background-color: #343a40 !important; /* Dark background */
    color: #fff !important;
}

body.dark-mode .navbar-light.bg-light h5 {
    color: #fff !important; /* Ensure "Welcome, user" text is white */
}

/* For links in the navbar under dark mode */
body.dark-mode .navbar-light.bg-light .navbar-nav .nav-link {
    color: #fff !important;
}

/* Style for active Save button */
.btn-active {
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.6); /* Green glow */
    animation: pulse 1s infinite;
}

/* Pulse Animation for Save button */
@keyframes pulse {
    0% {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.6);
    }
    50% {
        box-shadow: 0 0 15px rgba(40, 167, 69, 1);
    }
    100% {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.6);
    }
}