<style>
/* BEAUTIFUL TABLE STYLING */
.content {
  padding: 30px;
}

body {
  font-family: "Poppins", sans-serif;
  background: #f9f9f9;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

/* DARK MODE */
body.dark {
  background: #1e1e1e;
  color: #eaeaea;
}

.beauty-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

body.dark .beauty-table {
  background: #2b2b2b;
  color: #eaeaea;
}

.beauty-table th {
  background: #fafafa;
  padding: 12px;
}

body.dark .beauty-table th {
  background: #3a3a3a;
}

.beauty-table td {
  padding: 12px;
  border-top: 1px solid #eee;
}

body.dark .beauty-table td {
  border-top-color: #444;
}

.beauty-table tr:hover {
  background: #f4f4f4;
}

body.dark .beauty-table tr:hover {
  background: #3a3a3a;
}

.active { color: green; font-weight: bold; }
.pending { color: orange; font-weight: bold; }

/* DARK MODE TOGGLE BUTTON */
.dark-toggle {
  cursor: pointer;
  background: #ddd;
  border-radius: 20px;
  width: 50px;
  height: 25px;
  position: relative;
  transition: 0.3s;
}

.dark-toggle::after {
  content: "";
  width: 21px;
  height: 21px;
  background: lime;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}

body.dark .dark-toggle {
  background: #444;
}

body.dark .dark-toggle::after {
  transform: translateX(25px);
}

</style>