/* General page styling */
body {
  font-family: Arial, sans-serif;
  margin: auto;
  padding: 20px;
  background-color: #121212; /* Dark background */
  color: #e0e0e0; /* Light text */
}

/* Styling for the login screen */
#login-screen {
  background-color: #1e1e1e; /* Dark card background */
  padding: 20px;
  max-width: 400px;
  margin: 100px auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#login-screen h2 {
  margin-bottom: 20px;
}

#login-screen input {
  width: calc(100% - 20px); /* Adjust width based on padding */
  padding: 10px;
  margin-bottom: 10px;
  background-color: #333; /* Dark input background */
  color: #e0e0e0; /* Light input text */
  border: 1px solid #555; /* Border */
  border-radius: 5px;
}

#loginBtn {
  width: 100%;
  padding: 10px;
  background-color: #6200ea; /* Purple button */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#loginBtn:hover {
  background-color: #3700b3; /* Darker purple on hover */
}

/* Styling for the data view */
#data_view {
  max-width: 800px;
  margin: 50px auto;
  background-color: #1e1e1e; /* Dark card background */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#data {
  margin-top: 20px;
}

/* Position the 'Logged in as' text at the top-left of the screen */
#user-info {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px; /* Smaller font size */
  color: #333333; /* Darker text color */
  z-index: 100; /* Make sure it's on top */
}

/* Table Styling */
#data table {
  width: 100%;
  table-layout: fixed; /* Ensures equal column width */
  color: #e0e0e0;
  margin-bottom: 20px;
  border: 1px solid #333;
}

#data th, #data td {
  table-layout: fixed;
  width: 50%; /* Set the width for both columns */
  padding: 12px;
  text-align: left;

}

#data th {
  background-color: #6200ea; /* Purple header background */
  max-width: 100%;
  color: white;
}

#data td {
  background-color: #222;
  color: white;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* If content overflows, show "..." */
}

#data tr:nth-child(even) {
  background-color: #333; /* Darker alternating rows */
}

#data tr:nth-child(odd) {
  background-color: #1e1e1e; /* Lighter alternating rows */
}

/* Adjust the table to fit within the section */
#data .table-container {
  max-width: 1200px; /* Optional: Set a max-width for larger screens */

}

th.key-column {
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow */
}

th.value-column {
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow */
}

/* Add responsiveness */
@media only screen and (max-width: 768px) {
  .tab-section {
    width: 95%; /* On smaller screens, allow the tab section to take up more space */
    padding: 20px;
  }
}

#image-view {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Add this to center the content inside */
}

#last-snapshot-time {
  text-align: center; /* Centers text horizontally */
  margin: 0 auto;     /* Centers the div itself */
}