/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

/* Reset and Base Styles */
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background: #ffffff; /* White background */
  font-size: 14px; /* Smaller base font size */
  color: #333333; /* Dark grey text */
}

/* Navigation Styles */
.nav {
  list-style-type: none;
  margin: 0;
  padding: 0.5rem 1rem; /* Reduced padding from p-2 */
  background-color: #f8f9fa; /* Light grey background (Bootstrap bg-light) */
  display: flex;
  justify-content: center; /* Center the nav items */
  gap: 1.5rem; /* Space between items */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-item {
  float: none; /* Remove float for flex compatibility */
}

.nav-link {
  display: block;
  color: #4682b4; /* Slightly darker blue */
  text-align: center;
  padding: 0.5rem 1rem; /* Smaller padding */
  text-decoration: none;
  font-size: 0.875rem; /* Smaller font size (14px) */
  border-radius: 4px; /* Slightly rounded */
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #e9ecef; /* Light grey hover (Bootstrap-like) */
  color: #2f5a7a; /* Even darker blue for hover */
}

.nav-link.active {
  background-color: #4682b4; /* Slightly darker blue for active */
  color: #ffffff; /* White text */
}

/* Title Styles */
.title {
  text-align: center;
  font-size: 1.5rem; /* Smaller title */
  color: #4682b4; /* Slightly darker blue */
  margin: 1rem 0;
}

/* Form Styles */
form {
  max-width: 350px; /* Slightly smaller form */
  margin: 0 auto;
  padding: 15px; /* Reduced padding */
  background-color: #ffffff; /* White background */
  border-radius: 5px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border: 1px solid #cccccc; /* Grey border */
}

form label {
  display: inline-block;
  margin-bottom: 8px; /* Reduced margin */
  font-size: 0.875rem; /* Smaller font */
  color: #333333; /* Dark grey */
}

form input[type="date"],
form input[type="text"],
form input[type="submit"] {
  width: 100%;
  padding: 6px; /* Smaller padding */
  margin-bottom: 12px; /* Reduced margin */
  border: 1px solid #cccccc; /* Grey border */
  border-radius: 3px;
  font-size: 0.875rem; /* Smaller font */
  background-color: #ffffff; /* White background */
  color: #333333; /* Dark grey text */
}

form input[type="submit"] {
  background-color: #0d6efd; /* Bootstrap primary blue */
  border: 1px solid #0d6efd; /* Matching border */
  color: #ffffff; /* White text */
  cursor: pointer;
  border-radius: 6px; /* Rounded button */
  padding: 6px 12px; /* Smaller padding */
  transition: all 0.3s ease;
}

form input[type="submit"]:hover {
  background-color: #0b5ed7; /* Darker blue on hover */
  border-color: #0b5ed7; /* Matching border */
}

/* Table Styles */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 15px; /* Reduced margin */
  background-color: #ffffff; /* White background */
  border: 1px solid #cccccc; /* Grey border */
}

th, td {
  border: 1px solid #cccccc; /* Grey border */
  padding: 6px; /* Smaller padding */
  text-align: left;
  font-size: 0.875rem; /* Smaller font */
}

th {
  background-color: #f2f2f2; /* Very light grey header from second code */
  color: #333333; /* Dark grey text for contrast */
}

/* Button Styles */
.btn {
  font-size: 0.875rem; /* Smaller font */
  padding: 6px 12px; /* Smaller padding */
  border-radius: 6px; /* Rounded button */
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent; /* Default border */
}

.btn-primary {
  background-color: #0d6efd; /* Bootstrap primary blue */
  border-color: #0d6efd;
  color: #ffffff; /* White text */
}

.btn-primary:hover {
  background-color: #0b5ed7; /* Darker blue on hover */
  border-color: #0b5ed7;
}

.btn-success {
  background-color: #198754; /* Bootstrap success green */
  border-color: #198754;
  color: #ffffff; /* White text */
}

.btn-success:hover {
  background-color: #157347; /* Darker green on hover */
  border-color: #157347;
}

.btn-danger {
  background-color: #dc3545; /* Bootstrap danger red */
  border-color: #dc3545;
  color: #ffffff; /* White text */
}

.btn-danger:hover {
  background-color: #bb2d3b; /* Darker red on hover */
  border-color: #bb2d3b;
}

/* Utility Classes */
.capitalize {
  text-transform: uppercase;
}

/* Media Queries */
@media screen and (max-width: 600px) {
  form {
    max-width: 280px; /* Slightly smaller on mobile */
  }

  .nav {
    flex-direction: column; /* Stack nav items vertically */
    align-items: center;
    padding: 0.5rem;
    gap: 0.5rem; /* Reduced gap */
  }

  .nav-link {
    width: 100%;
    text-align: center;
    padding: 0.5rem;
  }

  th, td {
    padding: 4px; /* Even smaller padding */
    font-size: 0.75rem; /* Smaller font on mobile */
  }

  .btn {
    padding: 4px 8px; /* Even smaller padding on mobile */
    font-size: 0.75rem; /* Smaller font */
  }
}

/* Sticky Header Styling */
.sticky-header {
  position: sticky;
  top: 0;
  background-color: #f2f2f2; /* Very light grey header from second code */
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sticky-header th {
  background-color: #f2f2f2; /* Match thead background */
  color: #333333; /* Dark grey text */
}