/* Container styles */
.container {
  display: flex;
  flex-wrap: wrap; /* Wrap boxes to new rows when width is insufficient */
  justify-content: space-between; /* Distribute boxes evenly with space between them */
  align-items: stretch;
  height: 100vh;
  padding: 10px; /* Add padding to the container */
}
body {
  background-color: #1A4780;
  background-image: url('Background.jpg');
  background-size: cover; /* Cover the entire page */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-attachment: fixed; /* Optional: keeps the background fixed during scroll */
}

.logout-container {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex; /* Add this to align items in a row */
  align-items: center; /* This will vertically center align the items */
}

#logoutLink {
  font-size: 16px;
  color: white;
  font-family: Arial;
  margin-right: 10px; /* Adjusted margin to only right side */
}

#exitLogo {
  height: 20px; /* Example fixed height */
  width: 20px;
  margin-right: 10px;
  padding: 5px; /* Example fixed width */
  /* Removed font-size as it's not applicable to images */
}

img {
  width: 250px; /* Adjust the width as needed */
  height: auto; /* Maintain the aspect ratio */
  display: block; /* Prevent extra space below the image */
  margin: 5px; /* Add margin for spacing */
  padding: 10px 0 0 15px;
}

/* Common styles for all boxes */
.chart-container,
.data-box,
.data-box2,
#ticketCountCanvas {
  flex: 1 0 calc(25% - 20px); /* Allow boxes to grow and shrink with available space, but don't shrink below 25% width */
  box-sizing: border-box; /* Include padding and border in the box's total width */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 15px;
  background-color: white; /* Preserve the background color */
  background: rgba(255, 255, 255, 0.58);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Media query for screens narrower than 768px */
@media only screen and (max-width: 768px) {
  /* Adjust box size for medium-sized screens */
  .chart-container,
  .data-box,
  .data-box2,
  #ticketCountCanvas {
    flex: 1 0 calc(50% - 20px); /* Allow boxes to grow and shrink with available space, but don't shrink below 50% width */
  }
}

/* Media query for screens narrower than 480px */
@media only screen and (max-width: 480px) {
  /* Adjust box size for very small screens */
  .chart-container,
  .data-box,
  .data-box2,
  #ticketCountCanvas {
    flex: 1 0 calc(100% - 20px); /* Allow boxes to grow and shrink with available space, but don't shrink below 100% width */
  }
}

/* Center the text horizontally and vertically */
#Header {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: Arial;
}

.table-container {
  overflow-x: auto; /* Allows horizontal scrolling if table is wider than screen */
  overflow-y: hidden; /* Prevent vertical scrolling at the container level */
  max-height: 70vh; /* Adjust height as needed */
}

table {
  width: 100%; /* Full width to fit container */
  border-collapse: collapse;
  margin-top: 80px;
}

thead {
  background-color: #f2f2f2; /* Light grey background for visibility */
  color: black; /* Text color for headers */
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

tbody {
  display: block;
  overflow-y: scroll; /* Allows scrolling within the table body */
  max-height: 50vh; /* Adjust this to fit your design needs */
  background-color: white; /* Ensures any scrolling text is readable */
}

tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* Helps maintain column width */
}

/* Ensures the headers are not scrolled out of view */
thead tr {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* CSS for the dropdown */
.dropdown-container {
  position: absolute;
  top: 50px; /* Adjust as needed to position under the logout element */
  right: 10px; /* Align to the right */
  z-index: 10; /* Ensure it appears above other elements */
}

#projectDropdown {
  padding: 5px;
  font-size: 16px;
}