body {
  font-family: Arial, sans-serif;
  margin:0;
  display:flex;
  background-color:#f5f5f5;
  color:#000;
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  background-color: #121212;
  color: #eee;
}

.sidebar {
  width:220px;
  background:#222;
  color:#fff;
  height:100vh;
  padding:20px;
  transition: background 0.3s;
}

body.dark-mode .sidebar {
  background: #111;
}

.sidebar h2 {
  margin-bottom:20px;
}

.sidebar ul {
  list-style:none;
  padding:0;
}

.sidebar ul li {
  padding:10px;
  cursor:pointer;
}

.sidebar ul li.active {
  background:#444;
}

body.dark-mode .sidebar ul li.active {
  background:#333;
}

.main {
  flex:1;
  padding:20px;
  overflow:auto;
}

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

th, td {
  border:1px solid #ccc;
  padding:5px 10px;
  text-align:center;
}

body.dark-mode th, body.dark-mode td {
  border-color:#444;
}

input[type="number"], input[type="text"], select {
  width:90%;
  padding:3px;
}

body.dark-mode input, body.dark-mode select {
  background-color: #222;
  color: #fff;
  border:1px solid #555;
}

button {
  margin:5px;
  padding:5px 10px;
  cursor:pointer;
}

.chart-buttons button {
  margin-right:5px;
}

.users-controls {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.pagination {
  margin-top:10px;
}