/* Stroomlijnen Client Portal — Custom CSS */

/* Gradient text utility */
.grad-text {
  background: linear-gradient(135deg, #84BD00, #00B0E4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Impact card hover lift */
.impact-card {
  cursor: default;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.impact-card:hover {
  border-color: rgba(0, 176, 228, 0.35) !important;
  box-shadow: 0 0 28px rgba(0, 176, 228, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

/* Stat card hover */
.stat-card {
  cursor: default;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.stat-card:hover {
  border-color: rgba(0, 176, 228, 0.35) !important;
  box-shadow: 0 0 20px rgba(0, 176, 228, 0.1), 0 6px 18px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Charger card hover */
.charger-card {
  cursor: default;
  transition: box-shadow 0.3s ease, border-color 0.2s ease;
}
.charger-card:hover {
  box-shadow: 0 0 20px rgba(0, 176, 228, 0.1), 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Charging pulse animation */
@keyframes charger-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 176, 228, 0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 176, 228, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 176, 228, 0); }
}
.charging-pulse {
  animation: charger-pulse-ring 2s ease-out infinite;
}

/* SSE live dot pulse */
@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(132, 189, 0, 0.6); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(132, 189, 0, 0); }
}
.live-dot-pulse {
  animation: live-pulse 1.5s ease-in-out infinite;
}

/* Loading skeleton */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #0f2035 25%, #1a3a5c 50%, #0f2035 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Smooth scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: #1a3a5c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a4a7c; }

/* Input focus ring */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #00B0E4 !important;
}