.table-container {
      padding: 2rem;
      background: #fff;
      border-radius: 12px;
      overflow-x: auto;
  }

  .styled-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
  }

  .styled-table thead {
      background-color: #f3f4f6;
      color: #111827;
  }

  .styled-table th,
  .styled-table td {

      border-bottom: 1px solid #e5e7eb;
  }

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

  .styled-table td button.view-btn {
      padding: 1vh 2vh;
      border: 1px solid #2563eb;
      color: #2563eb;
      background: white;
      border-radius: 6px;
      cursor: pointer;
  }



  .styled-table td button.view-btn:hover {
      background-color: #ebf4ff;
  }

  .styled-table td button.update-btn {
      padding: 1vh 2vh;
      background: var(--Surface-Blue-Default, #2782D0);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
  }

  .styled-table td:nth-child(2) {
      border-right: 2px solid #e5e7eb;
  }

  .styled-table td:nth-child(3) {
      text-align: center;
  } 
.styled-table th:nth-child(n+3),
.styled-table td:nth-child(n+3) {
    text-align: center;
}

  .styled-table td span.updated {
      color: #60a5fa;
      font-weight: 500;
  }

  input[type="checkbox"] {
      width: 2vh;
      height: 2vh;
      border-radius: 5px;
      /* Slight border radius for rounded corners */
      accent-color: var(--Surface-Blue-Default, #2782D0);
      appearance: none;
      border: 1.5px solid #2782D0;
      background: #fff;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      transition: box-shadow 0.2s;
      position: relative;
  }

  input[type="checkbox"]:checked {
      background: var(--Surface-Blue-Default, #2782D0);
      border-color: var(--Surface-Blue-Default, #2782D0);
  }

  input[type="checkbox"]:checked::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: 12px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: translate(-50%, -60%) rotate(45deg);
      pointer-events: none;
  }



  .toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 24px;
  border-radius: 4px;
  color: white;
  z-index: 1000;
  animation: fadeIn 0.3s;
}
.toast.success {
  background-color: #4CAF50;
}
.toast.error {
  background-color: #F44336;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}