body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fa; /* Light background */
  color: #212529; /* Dark text */
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background-color: #fff !important; /* White header */
  border-bottom: 1px solid #dee2e6; /* Light border */
}
#mainmenu li a {
  margin-top: 5%;
  color: #212529 !important; /* Dark menu text */
}
#mainmenu li a:hover {
  color: #83cc61 !important; /* Accent color on hover */
}
.main-container {
  display: flex;
  flex: 1;
  margin-top: 80px; /* Adjust based on header height */
  padding-top: 20px; /* Add some padding below header */
}
.sidebar {
  width: 250px;
  background-color: #fff; /* White sidebar */
  padding: 20px;
  border-right: 1px solid #dee2e6; /* Light border */
  height: calc(100vh - 80px); /* Full height minus header */
  position: fixed;
  top: 80px; /* Position below header */
  left: 0;
  overflow-y: auto;
}
.sidebar .nav-link {
  display: block;
  background-color: #eee; /* Light gray background */
  color: #333; /* Darker text */
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #ccc; /* Lighter border */
  text-decoration: none;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: #83cc61; /* Accent color */
  color: #fff; /* White text on accent */
  border-color: #83cc61; /* Accent border */
}
.content-area {
  flex: 1;
  padding: 20px;
  margin-left: 250px; /* Same as sidebar width */
  background-color: #f8f9fa; /* Match body background */
}
.table {
  background-color: #fff; /* White table background */
  color: #212529; /* Dark table text */
  border: 1px solid #dee2e6; /* Light border */
}
.table th,
.table td {
  border-color: #dee2e6 !important; /* Light border */
}
.table thead th {
  background-color: #eee; /* Light gray header */
  border-bottom: 2px solid #dee2e6; /* Light border */
  color: #212529; /* Dark text */
}
h2 {
  color: #212529; /* Dark heading */
  border-bottom: 1px solid #dee2e6; /* Light border */
  padding-bottom: 10px;
  margin-bottom: 20px;
}
/* Adjust top bar styles */
#topbar {
  background-color: #f8f9fa; /* Light topbar */
  border-bottom: 1px solid #dee2e6; /* Light border */
  color: #555; /* Medium gray text */
}
#topbar .social-icons a i {
  color: #555; /* Medium gray icons */
}
#topbar .social-icons a:hover i {
  color: #83cc61; /* Accent color on hover */
}
.topbar-widget i,
.topbar-widget span {
  color: #555; /* Medium gray text */
}

/* Bootstrap Overrides for Theme Color */
:root {
  --bs-primary: #83cc61;
  --bs-primary-rgb: 131, 204, 97;
  --bs-link-color: #6aa34d; /* Darker shade for links */
  --bs-link-hover-color: #56853f; /* Even darker shade for link hover */
}

.btn-primary {
  --bs-btn-bg: #83cc61;
  --bs-btn-border-color: #83cc61;
  --bs-btn-hover-bg: #6aa34d; /* Darker shade for hover */
  --bs-btn-hover-border-color: #5f9145;
  --bs-btn-active-bg: #56853f; /* Even darker shade for active */
  --bs-btn-active-border-color: #4d7538;
  --bs-btn-disabled-bg: #a8d990;
  --bs-btn-disabled-border-color: #a8d990;
  /* Add !important to ensure override */
  background-color: #83cc61 !important;
  border-color: #83cc61 !important;
  color: #fff !important; /* Ensure text is readable */
}

.btn-primary:hover {
  background-color: #6aa34d !important;
  border-color: #5f9145 !important;
}

.btn-primary:active {
  background-color: #56853f !important;
  border-color: #4d7538 !important;
}

.btn-secondary {
  /* Optional: Style secondary buttons if needed */
  --bs-btn-color: #83cc61;
  --bs-btn-border-color: #83cc61;
  --bs-btn-hover-bg: #e9f7e2; /* Light green background on hover */
  --bs-btn-hover-border-color: #83cc61;
  --bs-btn-active-bg: #d3efc5; /* Slightly darker green for active */
  --bs-btn-active-border-color: #83cc61;
  /* Add !important to ensure override */
  color: #83cc61 !important;
  border-color: #83cc61 !important;
  background-color: transparent !important; /* Assuming secondary is an outline button */
}

.btn-secondary:hover {
  background-color: #e9f7e2 !important;
  border-color: #83cc61 !important;
  color: #56853f !important;
}

.btn-secondary:active {
  background-color: #d3efc5 !important;
  border-color: #83cc61 !important;
  color: #56853f !important;
}

.modal-header {
  background-color: #83cc61;
  color: #fff;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%); /* Make close button white */
}

.form-control:focus {
  border-color: #a8d990; /* Lighter green border on focus */
  box-shadow: 0 0 0 0.25rem rgba(131, 204, 97, 0.25); /* Green glow on focus */
}

.form-check-input:checked {
  background-color: #83cc61;
  border-color: #83cc61;
}

.form-check-input:focus {
  border-color: #a8d990;
  box-shadow: 0 0 0 0.25rem rgba(131, 204, 97, 0.25);
}