/* style/app.css */
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  /* Vibrant gradient background */
  background: linear-gradient(135deg, #ff0000, #ff5f2e, #ffbc45, #ffffff, #d8b4fe, #7f6afc, #5f2eff, #0000ff);
  background-size: 140% 140%;
  background-repeat: no-repeat;
  color: #333;
  transition: background 0.8s, color 0.8s;
  position: relative;
  overflow-x: hidden; /* to handle floating shapes */
}

body.dark-mode {
  background: linear-gradient(135deg, #000000, #121212, #222, #333, #454545);
  color: #f0f0f0;
}

/* Floating shapes container */
.floating-shapes {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; /* don't block clicks */
  overflow: hidden;
  z-index: -1; /* behind everything */
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  animation: floatShape 10s infinite ease-in-out alternate;
}

/* Example shapes, you can tweak colors/sizes for variety */
.shape1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, #ff0000, #ff5f2e, transparent);
  top: 10%; left: 5%;
}
.shape2 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at center, #2e2eff, #2effc0, transparent);
  top: 50%; left: 70%;
  animation-duration: 12s;
}
.shape3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at center, #f80759, #ffbc45, transparent);
  top: 70%; left: 15%;
  animation-duration: 14s;
}
.shape4 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center, #ad00ff, #ff00f7, transparent);
  top: 30%; left: 80%;
  animation-duration: 9s;
}

/* Floating animation keyframes */
@keyframes floatShape {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-50px) scale(1.2); }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header h1 {
  display: flex;
  align-items: center;
  font-size: 2em;
  margin: 0;
}

.header h1 .material-icons {
  margin-right: 10px;
  font-size: 1.2em;
}

/* Dark mode toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #007bff;
}
input:checked + .slider:before {
  transform: translateX(26px);
}

/* Content Layout */
.content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.panel {
  background: rgba(255,255,255,0.85);
  border-radius: 5px;
  padding: 20px;
  flex: 1 1 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background 0.3s;
}

body.dark-mode .panel {
  background: rgba(51,51,51,0.85);
}

.panel h2 {
  margin-top: 0;
  display: flex;
  align-items: center;
  color: inherit;
}

.panel h2 .material-icons {
  margin-right: 8px;
}

/* Graph Toolbar */
.graph-toolbar {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Polling Control */
.polling-control {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
}