:root {
  --aero-primary: #007bff;
  --aero-orange: #ff9d00;
  --aero-green: #38a169;
  --aero-danger: #dc3545;
  --aero-dark: #1a3946;
  --aero-bg: #f4f7fa;
}

html,
body {
  min-height: 100vh;
}

body {
  margin: 0;
  background: var(--aero-bg);
  color: #2d3748;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sidebar {
  width: 17rem;
  min-height: 100vh;
  background: linear-gradient(180deg, #000 0%, var(--aero-dark) 100%);
  position: sticky;
  top: 0;
}

.brand {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.subtitle {
  color: #a8b8c4;
  font-weight: 500;
}

.sidebar-link {
  color: #d0a9cf;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out;
}

.sidebar-link:hover,
.sidebar-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.metric-card {
  border-left: 4px solid var(--aero-primary);
}

.metric-card.metric-warning {
  border-left-color: var(--aero-orange);
}

.severity-critical {
  color: #fff;
  background: var(--aero-danger);
}

.severity-medium {
  color: #fff;
  background: var(--aero-orange);
}

.severity-low {
  color: #fff;
  background: var(--aero-green);
}

.instance-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: #edf2f7;
  color: #1a3946;
  text-decoration: none;
}

.instance-pill.active {
  background: var(--aero-primary);
  color: #fff;
}

.instance-pill .badge {
  font-weight: 500;
}

.login-wrapper {
  min-height: 70vh;
}

.login-card {
  width: 100%;
  max-width: 28rem;
}

.white-space-pre {
  white-space: pre-wrap;
}

@media (max-width: 991.98px) {
  body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-height: auto;
    position: static;
  }
}