/* ── Custom Gauge Component ── */
.gauge {
  --value: 0;
  --gauge-color: #0ea5e9; /* Tailwind brand-500 */
  background: conic-gradient(
    var(--gauge-color) calc(var(--value) * 1%),
    transparent 0
  );
}

.gauge.reserve {
  --gauge-color: #10b981; /* Tailwind emerald-500 */
}

.gauge.charger {
  --gauge-color: #f59e0b; /* Tailwind amber-500 */
}

/* ── Custom SVG Chart Elements ── */
.line-chart .grid line {
  stroke: #e2e8f0;
  stroke-width: 1;
}

.dark .line-chart .grid line {
  stroke: #334155;
}

.line-chart .grid text,
.line-chart .axis-labels text,
.line-chart .legend text {
  fill: #64748b;
  font-size: 13px;
}

.dark .line-chart .grid text,
.dark .line-chart .axis-labels text,
.dark .line-chart .legend text {
  fill: #94a3b8;
}

.line-chart .area {
  fill: rgba(14, 165, 233, 0.12);
}

.line-chart .line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-chart .dots circle {
  fill: #ffffff;
  stroke-width: 2;
}

.dark .line-chart .dots circle {
  fill: #0f172a;
}

.line-chart .hit-dot {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}

/* Headless UI active states for custom toggle button */
.ui-active {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: white !important;
}

/* Hide empty elements cleanly */
.empty\:hidden:empty {
  display: none;
}

/* ── Custom Charging Animation ── */
@keyframes intensePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6); /* cyan-500 */
    background-color: rgba(236, 254, 255, 1); /* cyan-50 */
  }
  50% {
    box-shadow: 0 0 25px 10px rgba(6, 182, 212, 0);
    background-color: rgba(207, 250, 254, 1); /* cyan-100 */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
    background-color: rgba(236, 254, 255, 1); /* cyan-50 */
  }
}

@keyframes intensePulseDark {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6); /* cyan-400 */
    background-color: rgba(34, 211, 238, 0.1);
  }
  50% {
    box-shadow: 0 0 25px 10px rgba(34, 211, 238, 0);
    background-color: rgba(34, 211, 238, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    background-color: rgba(34, 211, 238, 0.1);
  }
}

.is-charging {
  animation: intensePulse 1.5s infinite;
  border-color: #06b6d4 !important; /* cyan-500 */
}

.dark .is-charging {
  animation: intensePulseDark 1.5s infinite;
  border-color: #22d3ee !important; /* cyan-400 */
}

/* Hide spin buttons for datetime-local */
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-clear-button {
  display: none;
}

/* Custom calendar icon for datetime-local */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%2364748b" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
}

.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%2394a3b8" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>');
}

/* Pie Chart CSS variables */
:root {
  --pie-sisa: #e2e8f0;
}

.dark {
  --pie-sisa: #334155;
}