/* NAVIGATION BAR */
.navbar {
  display: flex;
  justify-content: space-between; /* Space out items evenly */
  align-items: center; /* Center items vertically */
  background: #333; /* Dark background color */
  padding: 15px 20px; /* Padding around the navbar */
  color: white; /* White text color */
  position: fixed; /* Fix the navbar at the top */
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  width: 100%; /* Full width */
  max-width: 100vw; /* Prevent horizontal scrolling */
  box-sizing: border-box; /* Include padding in width calculation */
  z-index: 1000; /* Ensure it stays on top */
}

/* Ensure the logo stays properly aligned in navbar */
.navbar {
  display: flex;
  align-items: center; /* Center items vertically */
}

.navbar .logo {
  margin-right: auto; /* Pushes nav links to the right */
  border-radius: 10px; /* Rounded corners for the logo */
}

.nav-links {
  list-style: none; /* Remove default list styling */
  display: flex; /* Display links in a row */
  gap: 20px; /* Space between links */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

.nav-links li {
  display: inline; /* Display list items inline */
}

.nav-links a {
  color: white; /* White text color */
  text-decoration: none; /* Remove underline */
  font-size: 16px; /* Font size */
  transition: 0.3s; /* Smooth transition for hover effect */
}

.nav-links a:hover {
  color: #667eea; /* Change color on hover */
}

/* Mobile Menu Button */
.menu-toggle {
  margin-left: auto; /* Aligns the button to the right */
  all: unset; /* Reset all inherited styles */
  display: none; /* Hide by default */
  background: none; /* No background */
  border: none; /* No border */
  color: white; /* White color */
  font-size: 24px; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: transform 0.3s ease; /* Add transition for rotation */
}

.menu-toggle:hover {
  color: rgb(255, 255, 255); /* Ensures it remains white on hover */
  background-color: #333; /* Dark background color */
}

/* Rotate the menu button when active */
.menu-toggle.active {
  transform: rotate(90deg); /* Rotate 90 degrees */
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Hide links by default */
    flex-direction: column; /* Stack links vertically */
    position: absolute; /* Position absolutely */
    top: 60px; /* Below the navbar */
    right: 0; /* Align to the right */
    background: #333; /* Dark background color */
    width: 100%; /* Full width */
    text-align: center; /* Center text */
    transition: max-height 0.5s ease; /* Smooth transition for dropdown */
    max-height: 0; /* Initially hidden */
    overflow: hidden; /* Hide overflow */
  }

  .nav-links.active {
    display: flex; /* Display links */
    margin-top: 10px; /* Margin at the top */
    max-height: 400px; /* Adjust as needed */
    padding-bottom: 20px; /* Padding at the bottom */
  }

  .menu-toggle {
    display: block; /* Show menu button */
  }
}

/* Custom checkbox styling */
input[type="checkbox"] {
  appearance: none; /* Remove default styling */
  width: 80px; /* Width of the checkbox */
  height: 40px; /* Height of the checkbox */
  background: #ef0909; /* Red background color */
  border-radius: 20px; /* Rounded corners */
  position: relative; /* Position relative for the circle */
  cursor: pointer; /* Pointer cursor */
  transition: background 0.3s; /* Smooth transition for background */
}

input[type="checkbox"]::before {
  content: ""; /* Empty content */
  position: absolute; /* Position absolutely */
  width: 32px; /* Width of the circle */
  height: 32px; /* Height of the circle */
  background: rgb(234, 234, 234); /* Light background color */
  border-radius: 50%; /* Rounded circle */
  top: 1px; /* Position from the top */
  left: 4px; /* Position from the left */
  transform: translateY(2px); /* Center the circle vertically */
  transition: transform 0.3s; /* Smooth transition for movement */
}

input[type="checkbox"]:checked {
  background: #4CAF50; /* Green background when checked */
}

input[type="checkbox"]:checked::before {
  transform: translate(40px, 2px); /* Move the circle to the right */
}

/* Adjust login container to be below navbar */
.login-container {
  margin-top: 100px; /* Margin at the top */
}

/* Prevents the entire page from scrolling sideways */
body {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  font-family: 'Poppins', sans-serif; /* Font family */
}

/* Logo Styling */
.logo img {
  height: 50px; /* Height of the logo */
  width: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra spacing */
  border-radius: 10px; /* Rounded corners */
}

/* Global Styles */
body {
  font-family: 'Poppins', sans-serif; /* Font family */
  background: linear-gradient(135deg, #667eea, #764ba2); /* Gradient background */
  min-height: 100vh; /* Minimum height */
  display: flex; /* Flexbox layout */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin: 0; /* Remove default margin */
}

/* Login Container */
.login-container {
  background: #ffffff; /* White background */
  padding: 2rem; /* Padding */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Box shadow */
  text-align: center; /* Center text */
  width: 100%; /* Full width */
  margin: 20px; /* Margin */
  margin-top: 70px; /* Margin at the top */
  max-width: 400px; /* Maximum width */
}

@media (max-width: 500px) {
  .login-container {
    width: 90%; /* Adjust width */
    padding: 1.5rem; /* Adjust padding */
  }
}

/* Title */
h2 {
  margin-bottom: 1rem; /* Margin at the bottom */
  color: #333; /* Text color */
}

/* Input Fields */
input {
  width: 95%; /* Full width */
  padding: 10px; /* Padding */
  margin: 10px 0; /* Margin */
  border: 1px solid #ccc; /* Border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  transition: all 0.3s ease; /* Smooth transition */
}
  
  /* Focus state for input fields */
  input:focus {
    border-color: #667eea; /* Blue border color */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5); /* Blue shadow */
  }

  /* General button styling */
  button {
    width: 100%; /* Full width */
    padding: 10px; /* Padding */
    background: #667eea; /* Blue background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transition */
  }

  /* Hover state for buttons */
  button:hover {
    background: #5a67d8; /* Darker blue background */
    transform: scale(1.05); /* Slightly enlarge */
  }

  /* Style for Create Account Button */
  .create-account {
    display: block; /* Block display */
    width: 100%; /* Full width */
    padding: 10px; /* Padding */
    margin-top: 10px; /* Margin at the top */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor */
    transition: background 0.3s ease; /* Smooth transition */
  }

  /* Hover state for Create Account Button */
  .create-account:hover {
    background-color: #45a049; /* Darker green background */
  }

  /* Margin adjustments for sign-in buttons */
  .sign-button {
    margin-top: 10px; /* Margin at the top */
    margin-bottom: 10px; /* Margin at the bottom */
  }

  /* Styling for signup container */
  .signup-container {
    background: #ffffff; /* White background */
    padding: 2rem; /* Padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Box shadow */
    text-align: center; /* Center text */
    width: 100%; /* Full width */
    margin: 20px; /* Margin */
    margin-top: 100px; /* Margin at the top */
    max-width: 400px; /* Maximum width */
  }

  /* Initially hide the message */
  .message {
    opacity: 0; /* Hidden */
    transform: translateY(10px); /* Slightly move down */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Smooth transition */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text */
  }

  /* Show error message */
  .message.show-error {
    color: red; /* Red text */
    opacity: 1; /* Visible */
    transform: translateY(0); /* Move to original position */
  }

  /* Show success message */
  .message.show-success {
    color: rgb(10, 207, 79); /* Green text */
    opacity: 1; /* Visible */
    transform: translateY(0); /* Move to original position */
  }

  /* Responsive Design for login container */
  @media (max-width: 500px) {
    .login-container {
      width: 90%; /* Adjust width */
      padding: 1.5rem; /* Adjust padding */
    }
  }

  /* Centered contact form */
  .contact-container {
    width: 80%; /* Width */
    margin: 50px auto; /* Centered margin */
    padding: 2rem; /* Padding */
    margin-top: 150px; /* Margin at the top */
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Box shadow */
    border-radius: 8px; /* Rounded corners */
    text-align: center; /* Center text */
  }

  /* Styling for message box */
  .message-box {
    width: 95%; /* Full width */
    margin-bottom: 20px; /* Margin at the bottom */
    height: 300px; /* Fixed height */
    resize: none; /* Prevent resizing */
  }

  /* Side-by-side container styling */
  .side-by-side {
    width: calc(100% - 20px); /* Adjust width */
    padding: 0 10px; /* Padding */
    background: rgba(150, 150, 150, 0.5); /* Semi-transparent background */
    display: flex; /* Flexbox layout */
    border-radius: 8px; /* Rounded corners */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    margin-bottom: 20px; /* Margin at the bottom */
    gap: 20px; /* Gap between items */
    border: 1px solid black; /* Black border */
  }

  /* Dashboard wrapper styling */
  .dashboard-wrapper {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Column layout */
    align-items: center; /* Center items */
    width: 100%; /* Full width */
    min-height: auto; /* Adjust height to fit all content */
    padding-top: 80px; /* Padding at the top */
    margin: 0 auto; /* Centered margin */
    box-sizing: border-box; /* Include padding in width/height */
  }

  /* Dashboard container styling */
  .dashboard-container {
    width: 80%; /* Width */
    min-height: 70vh; /* Minimum height */
    margin: 20px auto; /* Centered margin */
    background: rgb(255, 255, 255); /* White background */
    padding: 40px; /* Padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Box shadow */
    display: flex; /* Flexbox layout */
    flex-direction: row; /* Row layout */
    justify-content: space-between; /* Space between items */
    gap: 20px; /* Gap between items */
  }

  /* Individual column styling for dashboard */
  .dashboard-column {
    flex: 1; /* Equal space for each column */
    display: flex; /* Flexbox layout */
    background: rgb(207, 206, 206); /* Background color */
    padding: 20px; /* Padding */
    border-radius: 10px; /* Rounded corners */
    flex-direction: column; /* Column layout */
    justify-content: flex-start; /* Align items to the top */
    color: rgb(0, 0, 0); /* Text color */
    flex-shrink: 0; /* Prevent shrinking */
  }

  /* Style user info */
  .user-info {
    font-size: 18px; /* Font size */
  }

  /* Style extra content area */
  .extra-content {
    width: 100%; /* Full width */
    background: rgb(255, 255, 255); /* White background */
    border: 1px solid black; /* Black border */
    padding: 20px; /* Padding */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center text */
    flex-shrink: 0; /* Prevent shrinking */
  }

  /* Styling for images in extra content */
  .extra-content img {
    display: block; /* Block display */
    margin: 0 auto; /* Center image */
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Fit within container */
  }

  /* Admin container styling */
  .admin-container {
    width: 80%; /* Width */
    min-height: 85vh; /* Minimum height */
    margin: 20px auto; /* Centered margin */
    background: rgb(255, 255, 255); /* White background */
    padding: 40px; /* Padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Box shadow */
    display: flex; /* Flexbox layout */
    flex-direction: row; /* Row layout */
    justify-content: space-between; /* Space between items */
    gap: 20px; /* Gap between items */
  }

  /* Admin container with flexible height */
  .admin-container-flex {
    width: 80%; /* Width */
    min-height: fit-content; /* Fit content height */
    margin: 20px auto; /* Centered margin */
    background: rgb(255, 255, 255); /* White background */
    padding: 40px; /* Padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Box shadow */
    display: flex; /* Flexbox layout */
    flex-direction: row; /* Row layout */
    justify-content: space-between; /* Space between items */
    gap: 20px; /* Gap between items */
  }

.admin-column-flex {
  display: inline-flex; /* Use inline-flex to conform to the size of the content */
  background: rgb(207, 206, 206);
  padding: 20px;
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  color: rgb(0, 0, 0);
  flex-shrink: 0; /* Prevent columns from shrinking */
  width: auto; /* Adjust width to fit content */
}

.sign-in-table-container {
  width: 100%;
  overflow-x: auto; /* Enables horizontal scrolling */
  max-width: 100%;
}

.sign-in-table {
  width: 100%;
  border-collapse: collapse; /* Ensures no gaps between borders */
  background: transparent;
  color: white;
}

.sign-in-table th,
.sign-in-table td {
  border: 1px solid white; /* White separators */
  padding: 8px;
  text-align: left;
  white-space: nowrap; /* Prevents text wrapping */
}

.sign-in-table th {
  font-weight: bold;
  background: transparent; /* Transparent header */
}

.sign-in-table tr {
  background: transparent !important; /* Ensures no alternating row colors */
}


.admin-column {
  flex: 1; /* Each column takes up equal space */
  display: flex;
  background: rgb(207, 206, 206);
  padding: 20px;
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  color: rgb(0, 0, 0);
  flex-shrink: 0; /* Prevent columns from shrinking */
}

.admin-column-fixed {
  flex: 1; /* Each column takes up equal space */
  display: flex;
  min-height: 600px;
  background: rgb(207, 206, 206);
  padding: 20px;
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  color: rgb(0, 0, 0);
  flex-shrink: 0; /* Prevent columns from shrinking */
}

@media (max-width: 768px) {
  .admin-column-fixed {
    min-height: 600px; /* Ensure a minimum height of 600px on mobile screens */
  }
}


/* Media Query for Small Screens (Mobile) */
@media screen and (max-width: 768px) {
  .dashboard-container {
    flex-direction: column; /* Stack the columns vertically */
    height: auto; /* Adjust height to content */
    padding: 20px;
    margin: 20px; /* Add margin to the sides */
    /*margin-top: 100px;  Adjust margin to prevent overlap with navbar */
    gap: 20px; /* Constant margin between columns */
    
  }

  .admin-container {
    flex-direction: column; /* Stack the columns vertically */
    height: auto; /* Adjust height to content */
    padding: 20px;
    gap: 20px; /* Constant margin between columns */
    margin: 20px; /* Add margin to the sides */
  }

  .admin-container-flex{
    flex-direction: column; /* Stack the columns vertically */
    height: auto; /* Adjust height to content */
    padding: 20px;
    gap: 20px; /* Constant margin between columns */
    margin: 20px; /* Add margin to the sides */
  }

  .dashboard-column {
    width: calc(100% - 40px); /* Make each column take full width minus the container's padding */
  }
}

/* Override for dashboard only */
.dashboard-container h1 {
  align-self: flex-start;
  margin-bottom: 20px;
}

/* Style for Login Button */
.logout-button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 10px; /* Pushes the button to the bottom */
  background-color: #e74c3c; /* Red color */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
/* Modal for terms and conditions */
.terms-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  z-index: 1000; /* High z-index to overlay other elements */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Center using transform */
  width: 80%; /* 80% of the viewport width */
  max-height: 80vh; /* Maximum height of 80% of the viewport height */
  background: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
  color: white; /* White text color */
  padding: 5%; /* Padding inside the modal */
  overflow-y: auto; /* Enable vertical scrolling */
  border-radius: 10px; /* Rounded corners */
  margin-top: 20px; /* Margin at the top */
  box-sizing: border-box; /* Include padding in width/height */
}

/* Keyframes for flashing blue animation */
@keyframes flashBlue {
  0% { background-color: #ffffff; } /* Start with white */
  50% { background-color: #87CEFA; } /* Flash to light blue */
  100% { background-color: #ffffff; } /* End with white */
}

/* Class to apply flashing blue animation */
.flash-input {
  animation: flashBlue 2s ease-in-out; /* 2 seconds animation */
}

/* Container for table with scrolling */
.table-container {
  max-width: 100%; /* Full width */
  max-height: 700px; /* Maximum height */
  overflow: auto; /* Enable scrolling */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 8px; /* Rounded edges */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* General table styling */
table {
  width: 100%; /* Full width */
  border-collapse: collapse; /* No gaps between borders */
  font-family: Arial, sans-serif; /* Font family */
}

/* Styling for table headers */
thead {
  background-color: #3498db; /* Blue header background */
  color: white; /* White text color */
  position: sticky; /* Sticky header */
  top: 0; /* Stick to the top */
}

/* Styling for table cells */
th, td {
  padding: 12px; /* Padding inside cells */
  border-bottom: 1px solid #ddd; /* Bottom border */
  text-align: left; /* Left-aligned text */
}

/* Alternate row coloring for table body */
tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Light grey background */
}

/* Hover effect for table rows */
tbody tr:hover {
  background-color: #f1f1f1; /* Slightly darker grey on hover */
}

/* Responsive tweaks for small screens */
@media (max-width: 600px) {
  th, td {
    padding: 8px; /* Smaller padding */
    font-size: 14px; /* Smaller font size */
  }
}

/* Hover state for logout button */
.logout-button:hover {
  background-color: #c0392b; /* Darker red background */
}

/* Styling for change detail button */
.change-detail-button {
  display: block; /* Block display */
  width: 100%; /* Full width */
  padding: 10px; /* Padding */
  margin-top: 0; /* No top margin */
  background-color: #3498db; /* Blue background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: background 0.3s ease; /* Smooth background transition */
}

/* Hide button if it has no text */
.change-detail-button:empty {
  display: none; /* Hidden */
}

/* Styling for delete user button */
.delete-user-button {
  display: block; /* Block display */
  width: 100%; /* Full width */
  padding: 10px; /* Padding */
  margin-top: auto; /* Push to the bottom */
  background-color: #e71a1a; /* Red background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: background 0.3s ease; /* Smooth background transition */
}

/* Hide button if it has no text */
.delete-user-button:empty {
  display: none; /* Hidden */
}

/* Hover state for delete user button */
.delete-user-button:hover {
  background-color: #c0392b; /* Darker red background */
}

/* Styling for change password button */
.change-password-button {
  display: block; /* Block display */
  width: 100%; /* Full width */
  padding: 10px; /* Padding */
  margin-top: 0; /* No top margin */
  margin-bottom: 10px; /* Bottom margin */
  background-color: #e71a1a; /* Red background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: background 0.3s ease; /* Smooth background transition */
}

/* Hide button if it has no text */
.change-password-button:empty {
  display: none; /* Hidden */
}

/* Hover state for change password button */
.change-password-button:hover {
  background-color: #c0392b; /* Darker red background */
}

/* Styling for text fields */
.text-field {
  width: 100%; /* Full width */
  padding: 10px; /* Padding */
  margin-top: 10px; /* Top margin */
  border: 1px solid #ccc; /* Grey border */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Font size */
  box-sizing: border-box; /* Include padding in width */
}

/* Submit button styling */
#submitMessage {
  background-color: #4CAF50; /* Green background color */
  color: white; /* White text color */
  padding: 10px 15px; /* Padding inside the button */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: 0.3s; /* Smooth transition for hover effect */
}

/* Hover state for submit button */
#submitMessage:hover {
  background-color: #45a049; /* Darker green background on hover */
}

/* Message status styling */
#messageStatus {
  margin-top: 10px; /* Margin at the top */
  color: green; /* Green text color */
  font-weight: bold; /* Bold text */
}

#festivalList .festival-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

#festivalList table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

#festivalList th,
#festivalList td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

#festivalList thead {
  position: sticky;
  top: 0;
  background-color: #f7f7f7;
  z-index: 1;
}

#festivalList tr:hover {
  background-color: #f1f1f1;
}

#festivalList button,
#festivalList select {
  padding: 6px 10px;
  font-size: 0.9rem;
}

.flex-inline {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}



.container-wrapper {
  width: 80%;
  margin: 20px auto;
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  
  /* Remove min-height and fixed height */
  /* Remove overflow: visible (default is fine) */

  /* Remove flex if not needed for layout */
  display: block; /* block elements grow with content */
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .container-wrapper {
    width: 90%;
    padding: 20px;
    margin: 10px auto;
    box-sizing: border-box;
  }
}

/* Wrap your table in this */
.table-wrapper {
  max-height: 600px; /* Adjust as needed */
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* Table structure remains mostly the same */
.clean-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background-color: #ffffff;
}

.clean-table thead {
  background-color: #f5f6f8;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 1;
}

.clean-table th,
.clean-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 1px solid #e4e7eb;
  background-color: #fff; /* ensures sticky header stays clean */
}

.clean-table th {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
}

.clean-table tbody tr:hover {
  background-color: #f9fafc;
  transition: background 0.2s ease-in-out;
}

.clean-table tbody tr:last-child td {
  border-bottom: none;
}