.card {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.card:hover {
  border-color: rgba(100, 116, 139, 0.4);
}

.nav-link {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #94a3b8;
  transition: all 0.15s;
}

.nav-link:hover {
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.5);
}

.nav-link.active {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
}

.status-online {
  color: #4ade80;
}

.status-offline {
  color: #f87171;
}

.badge-green {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.badge-yellow {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
}

.badge-red {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

/* Log levels */
.log-error { color: #f87171; }
.log-warn { color: #fbbf24; }
.log-info { color: #94a3b8; }

/* Incident severity */
.severity-critical { border-left: 3px solid #f87171; }
.severity-error { border-left: 3px solid #fb923c; }
.severity-warning { border-left: 3px solid #fbbf24; }
.severity-info { border-left: 3px solid #60a5fa; }

/* Chart container - fixed height */
.chart-container {
  position: relative;
  height: 220px;
  width: 100%;
}

/* Score meter */
.score-meter {
  background: #1e293b;
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* Responsive table */
@media (max-width: 640px) {
  table { font-size: 0.75rem; }
  th, td { padding: 0.5rem 0.25rem; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }