@import url(./../main.css);
@import url(../layouts/dashboard-layout.css);
@import url(../components/sidebar.css);
@import url(../components/cards.css);
@import url(../components/map.css);
@import url(../components/line-chart.css);
@import url(../components/modals.css);

/* Remove global layout gradient for monitoring module pages so the
	 static map or module-specific backgrounds are visible instead. */
html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.dashboard-page {
  background: #e9e8e8 !important;
  background-image: none !important;
  background-color: #e9e8e8 !important;
}

.chart-container {
  position: relative;

  height: 582.5px;
  width: 1168.9px;
  flex: 0 0 auto; /* 🚨 prevents flex resizing loop */
}

/* Shimmer Skeleton */
.shimmer {
  position: relative;
  overflow: hidden;
  background: #eeeeee !important;
  height: 140px; /* Match your card height */
  border: none !important;
  box-shadow: none !important;
  margin-top: var(--space-125);
  margin-bottom: var(--space-125);
}

.shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    #f6f7f8 0%,
    #edeef1 20%,
    #f6f7f8 40%,
    #f6f7f8 100%
  );
  animation: shimmer-swipe 1.5s infinite;
}

@keyframes shimmer-swipe {
  100% {
    transform: translateX(100%);
  }
}
/* ========== TABLET RESPONSIVE (max-width: 1024px) ========== */
@media (max-width: 1024px) {
  .shimmer {
    height: 120px;
    margin-top: var(--space-100);
    margin-bottom: var(--space-100);
  }
  .chart-container {
    width: 100%;
  }
}

/* ========== MOBILE RESPONSIVE (max-width: 768px) ========== */
@media (max-width: 834px) {
  .shimmer {
    height: 100px;
    margin-top: var(--space-075);
    margin-bottom: var(--space-075);
  }

  .chart-container {
    height: 369.9px;
    width: 100%;
  }
}

@media (max-width: 330px) {
  .chart-container {
    height: 500px; /* taller on mobile */
  }
}