body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #6dd5ed, #2193b0);
  color: #333;
}

.container {
  width: 90%;
  margin: 5px auto;
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
  text-align: center;
  color: #2193b0;
}

.notification {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
}

.notification.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.notification.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.action-buttons {
  text-align: center;
  margin: 20px 0;
}

.btn, .btn-logout, .btn-edit, .btn-delete {
  display: inline-block;
  margin: 5px;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}

.btn {
  background: #2193b0;
  color: #fff;
  font-weight: bold;
}

.btn:hover {
  background: #17678c;
}

.btn-logout {
  background: #ff4c4c;
  color: #fff;
  font-weight: bold;
}

.btn-logout:hover {
  background: #cc0000;
}

.btn-edit {
  background: #4caf50;
  color: #fff;
}

.btn-edit:hover {
  background: #3e8e41;
}

.btn-delete {
  background: #f44336;
  color: #fff;
}

.btn-delete:hover {
  background: #d32f2f;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

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

table th {
  background: #2193b0;
  color: #fff;
}

table tr:nth-child(even) {
  background: #f2f2f2;
}

table tr:hover {
  background: #f1f9ff;
}
/* Make Table Responsive */
.table-responsive {
  max-height: 70vh; /* Ensures it doesn’t take up the whole page */
  overflow-y: auto; /* Enables vertical scrolling */
  overflow-x: auto; /* Enables horizontal scrolling */
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Adjust Font Size & Spacing for Better Fit */
.responsive-table {
  font-size: 14px; /* Reduced font size */
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/* Table Headers */
.responsive-table thead th {
  font-size: 14px; /* Smaller font */
  padding: 8px; /* Reduced padding */
  text-align: center;
  background-color: #007bff;
  color: white;
}

/* Table Cells */
.responsive-table th,
.responsive-table td {
  padding: 6px; /* Less padding to fit more data */
  text-align: center;
  white-space: nowrap; /* Prevents text from wrapping */
  font-size: 14px;
}


/* Reduce Font Size for Mobile */
@media (max-width: 768px) {
  .responsive-table {
      font-size: 12px; /* Even smaller on mobile */
      max-height: 60vh; /* Adjust height for small screens */
  }

  .responsive-table thead th {
      font-size: 12px;
      padding: 6px;
      
  }

  .responsive-table td {
      font-size: 12px;
      padding: 5px;
  }
}

.action-select {
  padding: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: white;
  cursor: pointer;
}

.action-select:hover {
  background: #f8f8f8;
}

.action-select:focus {
  outline: none;
  border-color: #007bff;
}

/* Freeze Table Header */
.responsive-table table {
  width: 768px;
  border-collapse: collapse;
}

.responsive-table thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* Ensures header remains visible */
  z-index: 100; /* Keeps it above table rows */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Shadow effect */
}