/* App shell + utilities */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.fresh-gradient {
  background-color: rgb(134, 239, 172);
  background-image: linear-gradient(
    to right bottom,
    rgb(219, 234, 254),
    rgb(187, 247, 208),
    rgb(254, 249, 195)
  );
}

.dark {
  color-scheme: dark;
}

/* ─── Landing page animations ─── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}
@keyframes counter {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.anim-fade-up     { animation: fade-up 0.7s ease-out both; }
.anim-fade-in     { animation: fade-in 0.6s ease-out both; }
.anim-slide-right { animation: slide-in-right 0.8s ease-out both; }
.anim-float       { animation: float 6s ease-in-out infinite; }
.anim-pulse-glow  { animation: pulse-glow 3s ease-in-out infinite; }
.anim-counter     { animation: counter 0.5s ease-out both; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Hero mesh gradient */
.hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(37,99,235,0.12), transparent),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(16,185,129,0.10), transparent),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(168,85,247,0.06), transparent);
}
.dark .hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(37,99,235,0.20), transparent),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(16,185,129,0.14), transparent),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(168,85,247,0.10), transparent);
}

/* Grid pattern overlay */
.grid-pattern {
  background-image:
    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
}
.dark .grid-pattern {
  background-image:
    linear-gradient(rgba(148,163,184,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.04) 1px, transparent 1px);
}

/* Feature card hover lift */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
}

/* Metric counter styling */
.metric-value {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark .metric-value {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section divider */
.section-divider {
  background: linear-gradient(90deg, transparent, rgba(148,163,184,0.3), transparent);
  height: 1px;
}

/* CTA gradient */
.cta-gradient {
  background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #2563eb 100%);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Chart containers: fixed height for Chart.js */
.chart-box {
  position: relative;
  height: 260px;
  width: 100%;
}

.chart-box--sm {
  height: 200px;
}

.chart-box--lg {
  height: 320px;
}

/* Sidebar scroll */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184 / 0.5) transparent;
}

/* Focus ring utility */
.focus-ring:focus-visible {
  outline: 2px solid rgb(37 99 235);
  outline-offset: 2px;
}

.dark .focus-ring:focus-visible {
  outline-color: rgb(96 165 250);
}

/* Leaflet popups (analytics map): wrapper/tip stay white by default — match popupTheme in analytics_geo_map.ts */
.dark .lapor-map-popup .leaflet-popup-content-wrapper {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #334155;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.dark .lapor-map-popup .leaflet-popup-tip {
  background: #1e293b;
  box-shadow: none;
}

.dark .lapor-map-popup a.leaflet-popup-close-button {
  color: #94a3b8;
}

.dark .lapor-map-popup a.leaflet-popup-close-button:hover {
  color: #f1f5f9;
}