/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #4e342e; /* Darkest dirt brown for the main background */
  color: #f7e5c3; /* Aged parchment-like text */
  padding: 20px;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 150px; /* Adjust the height as needed */
  margin-right: 10px; /* Space between the logo and the heading */
}

/* Footer Styling */
.footer {
  margin-top: auto; /* Push footer to the bottom dynamically */
  background-color: #3e2723; /* Darker brown for footer background */
  color: #d1b89f; /* Subtle tan footer text */
  text-align: center;
  padding: 10px 0;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  white-space: nowrap;
}

.footer a {
  color: #d1b89f; /* Subtle tan footer text */
  text-decoration: underline; /* Always underline */
  margin-left: 10px; /* Space between the copyright and the link */
}

.footer a:visited {
  color: #d1b89f; /* Ensure the color remains the same after the link is visited */
  text-decoration: underline; /* Always underline */
}

.footer a:hover {
  text-decoration: underline; /* Always underline */
}

h1, h2 {
  color: #e0c49b; /* Parchment-like header text */
  margin-bottom: 20px;
}

h1 {
  font-size: 2.2rem;
  text-align: center;
}

h2 {
  font-size: 1.5rem;
}

.hidden {
  display: none;
}

button {
  background-color: #8b5a2b; /* Rich leathery brown for buttons */
  border: none;
  color: #fff; /* White text for better readability on buttons */
  font-weight: 600; /* Slightly bolder for readability */
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  margin-top: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button:hover {
  background-color: #6d4525; /* Darker brown on hover for a subtle effect */
  color: #f7e5c3; /* Parchment-like hover text for extra contrast */
}

button:disabled {
  background-color: #baa084; /* Muted tan for disabled buttons */
  color: #4e342e; /* Dirt brown text on disabled buttons for a clear inactive state */
  cursor: not-allowed;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
  font-size: 1rem;
  color: inherit;
}

.icon-button:hover {
  color: #007bff;
}

.table-wrapper {
  overflow-x: auto; /* Enable horizontal scrolling for the table */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table th, table td {
  padding: 10px;
  border: 1px solid #8b5a2b; /* Rich brown table borders */
  text-align: center;
}

table th {
  background-color: #5D4037; /* Dark chocolate brown for header cells */
  color: #f7e5c3; /* Light parchment header text */
  font-weight: 600;
}

table td {
  background-color: #deb887; /* Weathered parchment tan cell background */
  color: #3e2723; /* Darker text on table cells for strong readability */
}

table td input {
  width: 90%;
  padding: 5px;
  font-size: 0.9rem;
  border-radius: 4px;
  border: 1px solid #6d4525; /* Warm dark brown for input borders */
  text-align: center;
  background-color: #f5deb3; /* Pale parchment input background */
  color: #3e2723; /* Dark text on inputs */
}

table td input:focus {
  outline: none;
  border-color: #8b5a2b; /* Brighter brown for input focus */
}

/* Sticky Column Styling */
.sticky-column {
  position: sticky;
  left: 0;
  z-index: 1; /* Ensures it stays above other table content */
  background-color: #5D4037; /* Consistent with header background */
  color: #f7e5c3; /* Light parchment text for contrast */
}

/* Card Styling */
.card {
  background: #795548; /* Dark leather brown for card backgrounds */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Rich shadow for depth */
  margin-bottom: 20px;
  min-width: 100%; /* Ensure the card spans at least 100% width of its parent */
  overflow-x: auto; /* Add horizontal scrolling for content */
}

.card h2 {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  button {
    font-size: 0.8rem;
    padding: 8px 10px;
  }

  table th, table td {
    font-size: 0.8rem;
    padding: 8px;
  }
}