.nav-link {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  text-align: left;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
.nav-link:hover {
  background-color: rgba(0, 212, 170, 0.1);
  color: #00d4aa;
}
.nav-link.active {
  background-color: #00d4aa;
  color: white;
}

/* Ensure charts aren't oversized */
canvas {
  width: 100% !important;
  max-height: 240px !important;
  height: auto !important;
}
@media (max-width: 768px) {
  canvas { max-height: 160px !important; }
}

/* Card widgets and chart blocks styling */
.card-box {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .card-box {
  background-color: #111827;
  border-color: #374151;
}
.card-box h3 {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.card-box .val {
  font-size: 1.125rem;
  font-weight: 600;
}
.card-box .bar {
  width: 100%;
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 0.5rem;
  margin-top: 0.25rem;
}
.dark .card-box .bar {
  background-color: #374151;
}
.card-box .bar div {
  background-color: #00d4aa;
  height: 100%;
  border-radius: 9999px;
}

.chart-box {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .chart-box {
  background-color: #111827;
  border-color: #374151;
}
.chart-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Loader spin animation */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin {
  animation: spin 0.8s linear infinite;
}

/* Scrollbars and sidebar adjustments */
html, body {
  scrollbar-color: #00d4aa transparent;
  scrollbar-width: thin;
}

#sidebar {
  min-height: 100vh;
}
/* --- Tailwind modal dark‑mode patch --- */

/* Remove default browser border/outline on Tailwind modals */
.dark #tailwindModal > div {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Force dark surface colour */
.dark #tailwindModal .rounded-lg {
  background-color: #111827 !important; /* Tailwind gray‑900 */
  color: #f3f4f6 !important;            /* Tailwind gray‑100 */
}

/* Ensure no light edges from focus rings */
#tailwindModal:focus,
#tailwindModal *:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* Dark‑mode card/modal inner borders */
.dark .border-gray-800 {
  border-color: #1f2937 !important;  /* Tailwind gray‑800 */
}

/* Optional: even subtler for true flat look */
.dark .border-gray-800,
.dark .border-gray-700 {
  border-color: #111827 !important;  /* remove visible line completely */
}
.api-card {
  width: 100%;
}