/* custom.css for Materialize Dark Theme */

/* Global Styles */
body {
    background-color: #121212;
    color: #e0e0e0;
  }
  
  /* Navbar and Sidenav */
  .nav-wrapper {
    background-color: #1f1f1f !important;
    display: flex;
    align-items: center;
  
  }
  
  /* Ensure the sidenav is dark and its items are vertical */
  ul.sidenav {
    background-color: #1f1f1f !important;
    padding: 0;
    margin: 0;
  }

  ul.sidenav li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #333;
  }

  ul.sidenav li a {
    display: block;
    padding: 8px;
    color: #e0e0e0 !important;
    text-decoration: none;
  }

  ul.sidenav li a:hover {
    background-color: #333 !important;
  }


  /* Brand Logo */
  .brand-logo img {
    height: 50px;
  }
  
  /* Links */
  a {
    color: #bb86fc;
  }
  a:hover {
    color: #d0a7ff;
  }
  
  /* Statistic Boxes */
  .stat-box {
    padding: 10px;
    border: 1px solid #333;
    margin-bottom: 15px;
    text-align: center;
    background-color: #1e1e1e;
    color: #e0e0e0;
  }
  
  /* Buttons */
  /* .btn {
    background-color: #ff7201 !important;
    border: none;
    box-shadow: none;
  }
  .btn:hover {
    background-color: #ff8a2a !important;
  } */
  
  /* Tables */
  table {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }
  table th, table td {
    border: 1px solid #333;
    padding: 8px;
  }

  /* Override Materialize striped table rows for dark theme */
  table.striped tbody tr:nth-child(odd) {
    background-color: #242424 !important;
  }
  table.striped tbody tr:nth-child(even) {
    background-color: #1e1e1e !important;
  }

  /* Form Elements */
  .input-field input, .input-field textarea {
    background-color: #333;
    color: #e0e0e0;
  }
  .input-field label {
    color: #9e9e9e;
  }
  
/* Fix Materialize Autocomplete Text Highlight on Dark Theme */
ul.autocomplete-content li .highlight {
  background-color: #555 !important; /* Darker background for better visibility */
  color: #ffffff !important; /* Ensures text stays white */
}

/* Style the dropdown to make it more visible */
ul.autocomplete-content {
  background-color: #2c2c2c !important; /* Dark dropdown background */
  border: 1px solid #444 !important; /* Add border to distinguish dropdown */
}

/* Style individual items inside dropdown */
ul.autocomplete-content li {
  color: #ffffff !important; /* Ensure text is always visible */
}

/* Change hover effect */
ul.autocomplete-content li:hover {
  background-color: #444 !important;
}
  
/* Style the select dropdown itself */
select {
  background-color: #333; /* Dark background */
  color: #fff; /* White text */
  border: 1px solid #555; /* Subtle border */
}

/* Style the dropdown options */
.dropdown-content {
  background-color: #333 !important; /* Dark background */
}

.dropdown-content li>a, .dropdown-content li>span {
  color: #fff !important; /* White text for readability */
}

/* Highlight selected option */
.dropdown-content li:hover, .dropdown-content li.selected {
  background-color: #444 !important; /* Slightly lighter hover */
}

/* Center the search bar within the navbar */
.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: auto 0;
}

/* Search Form */
.search-form {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 250px;
}

/* Search Box */
.search-box {
  display: flex;
  align-items: center;
  background: #2c2c2c;
  border-radius: 4px;
  border: 1px solid #444;
  padding: 5px;
  margin-top: 8px;
  height: 50px;
}

/* Search Input */
.search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 5px 8px;
  font-size: 14px;
}

/* Search Button */
.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 0 5px;
}

.search-btn:hover {
  color: #bbbbbb;
}