@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Main resets and custom base classes */
body {
  font-family: 'Outfit', 'Inter', sans-serif;
  background-color: #F8FAFC; /* brand-slate-50 */
  color: #0F172A; /* brand-slate-900 */
  overflow-x: hidden;
}

/* Hide scrollbar globally for html & body */
html, body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #CBD5E1;
}

/* Glassmorphism subtle overlay */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Micro-animations */
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.slide-up {
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in {
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Device toggle animation styles */
.device-card-active {
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.12), 0 4px 20px -2px rgba(15, 23, 42, 0.04);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(240, 253, 250, 0.5) 100%) !important;
}

.device-card-active-warn {
  border-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), 0 4px 20px -2px rgba(15, 23, 42, 0.04);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(254, 243, 199, 0.3) 100%) !important;
}

/* Pulse keyframes for glowing elements */
@keyframes accent-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

@keyframes accent-pulse-warn {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
}

.pulse-indicator {
  animation: accent-pulse 2s infinite ease-in-out;
}

.pulse-indicator-warn {
  animation: accent-pulse-warn 2s infinite ease-in-out;
}

/* Custom switch active styling */
.toggle-switch-input:checked + .toggle-switch-bg {
  background-color: #10B981; /* Emerald-500 */
}

.toggle-switch-input:checked + .toggle-switch-bg .toggle-switch-dot {
  transform: translateX(100%);
}

/* ============================================================
   DEVICE TOGGLE — Zero-flash, CSS-driven state transitions
   All elements that change on toggle use transition: all 300ms
   ============================================================ */

/* Card-level flash ring on toggle — brief emerald/amber pulse */
@keyframes toggle-confirm-flash {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  40%  { box-shadow: 0 0 0 10px rgba(16,185,129,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.device-toggle-flash {
  animation: toggle-confirm-flash 0.55s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
}

/* Smooth color transitions on all data-patched elements */
[data-indicator-dot],
[data-indicator-bg],
[data-device-icon],
[data-device-icon-bg],
[data-device-status],
[data-device-watt],
[data-load-bar],
[data-toggle-bg],
[data-toggle-thumb] {
  transition: background-color 300ms ease, color 300ms ease,
              transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              width 400ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms ease, box-shadow 300ms ease,
              opacity 200ms ease !important;
}

/* Device card itself gets smooth border/shadow transitions */
[id^="device-card-"] {
  transition: border-color 350ms ease, box-shadow 350ms ease,
              background 350ms ease, transform 200ms ease !important;
}

/* Toggle thumb slide — no re-render needed */
[data-toggle-thumb],
#detail-toggle-thumb {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Detail toggle bg */
#detail-toggle-bg {
  transition: background-color 300ms ease !important;
}

/* Watt counter smooth fade-update */
[data-device-watt],
#detail-hero-watt {
  transition: color 300ms ease !important;
}

/* List row highlight on toggle */
tr.device-toggle-flash td {
  animation: row-toggle-flash 0.5s ease forwards;
}

@keyframes row-toggle-flash {
  0%   { background-color: rgba(16,185,129,0.08); }
  100% { background-color: transparent; }
}

/* Backdrop-filter support fallback */
@supports not (backdrop-filter: blur(12px)) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* Custom active state highlight for navbar indicators */
.active-nav-indicator {
  position: relative;
}
.active-nav-indicator::after {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background-color: #10B981;
  border-radius: 9999px;
}

/* ============================================================
   SVG GRAPH ANIMATIONS — Scale-in, path draw & entry animations
   ============================================================ */

/* Main SVG canvas container */
svg.w-full {
  animation: graph-canvas-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes graph-canvas-fade {
  from {
    opacity: 0.1;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 1. Area & Sparkline Charts Path animation */
svg path[d*="M"],
svg path[d*="m"] {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: graph-line-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes graph-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 2. Bar Chart Rects fade-in animation */
svg rect[height]:not([rx="3"]) {
  opacity: 0;
  animation: graph-bar-fade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes graph-bar-fade {
  to {
    opacity: 1;
  }
}



/* 4. Heatmap & grid square delay entries */
svg rect[rx="3"] {
  opacity: 0;
  animation: graph-heatmap-fade 0.5s ease-out forwards;
}

svg rect[rx="3"]:nth-child(5n+1) { animation-delay: 0.05s; }
svg rect[rx="3"]:nth-child(5n+2) { animation-delay: 0.1s; }
svg rect[rx="3"]:nth-child(5n+3) { animation-delay: 0.15s; }
svg rect[rx="3"]:nth-child(5n+4) { animation-delay: 0.2s; }
svg rect[rx="3"]:nth-child(5n+5) { animation-delay: 0.25s; }

@keyframes graph-heatmap-fade {
  to {
    opacity: 1;
  }
}

/* Utility to hide scrollbars while preserving scrolling functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}