/* Nordwind Monitoring – minimale Erweiterungen über Tailwind hinaus */

:root {
  --brand-primary: #0c4a6e;
  --brand-accent: #0ea5e9;
  --brand-success: #059669;
  --brand-warning: #d97706;
  --brand-danger: #dc2626;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Drag & Drop Zone */
.drop-zone {
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.drop-zone.drag-over {
  border-color: var(--brand-accent);
  background-color: #f0f9ff;
  transform: scale(1.005);
}

.drop-zone.has-file {
  border-color: var(--brand-success);
  background-color: #ecfdf5;
}

/* Sidebar active link */
.nav-link.active {
  background-color: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

.nav-link.active svg {
  color: #0284c7;
}

/* Table row hover */
.data-row {
  transition: background-color 0.15s ease;
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
}

.badge-dot::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* KPI card subtle animation on load */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.4s ease forwards;
}

.animate-fade-up:nth-child(2) { animation-delay: 0.05s; }
.animate-fade-up:nth-child(3) { animation-delay: 0.1s; }
.animate-fade-up:nth-child(4) { animation-delay: 0.15s; }
.animate-fade-up:nth-child(5) { animation-delay: 0.2s; }

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}