/* Mobile-first styling for the login page, dashboard, settings, locations, assets, and asset details */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  text-align: center;
}

.login-container, .dashboard-container, .settings-container, .location-container, .assets-container, .asset-form-container, .test-form-container, .reports-container{
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 90%;
  overflow-x: auto;
  max-height:90%;
  overflow-y:scroll;
}

h2, h3 {
  margin-bottom: 20px;
}

label {
  display: block;
  text-align: left;
  margin: 10px 0 5px;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  font-size: 18px;
}

button:hover {
  background-color: #0056b3;
}

.dashboard-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

/* Mobile-first styling for tables ensuring alignment and text visibility */

/* Mobile-first styling for tables ensuring alignment and text visibility */

.table-container {
  width: 100%;
  overflow-x: auto;
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 800px; /* Allow wider tables for better content display */
  table-layout: auto;
}

thead, tbody {
  width: 100%;
}

tr {
  display: table-row;
  width: 100%;
}

thead tr {
  background-color: #007bff;
  color: white;
}

td, th {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  word-wrap: break-word;
  white-space: nowrap; /* Prevents wrapping for better readability */
  min-width: 120px;
}

.retestrequired {
  background-color: #ffcccc !important;
  color: #900 !important;
}

/* Ensure thead and tbody columns align correctly */
th, td {
  width: auto;
  text-align: left;
}

thead th {
  text-align: left;
}

/* Responsive fix to allow horizontal scrolling for smaller screens */
@media (max-width: 600px) {
  .table-container {
      overflow-x: auto;
      display: block;
      max-width: 100%;
  }
  table {
      min-width: 800px;
      table-layout: auto;
  }
  thead, tbody {
      width: 100%;
  }
  tr {
      display: table-row;
      width: 100%;
  }
  td, th {
      display: table-cell;
      text-align: left;
  }
}


.test-form-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 500px;
  text-align: left;
  margin: 20px auto;
}

.test-form-container h2 {
  text-align: center;
}

.test-form-container label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.test-form-container select,
.test-form-container textarea,
.test-form-container input,
.asset-form-container select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 5px;
}

.test-form-container button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  font-size: 16px;
}

.test-form-container button:hover {
  background-color: #0056b3;
}


.select2-results__option {
  text-align: left !important;
}

.select2-container {
  text-align: left !important;
}

.reports-container h2, .reports-container h3 {
  text-align: center;
}

.reports-container label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.reports-container input[type="date"],
.reports-container select,
.reports-container textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 5px;
}

.reports-container button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  font-size: 16px;
}

.reports-container button:hover {
  background-color: #0056b3;
}