/* status-site/public/style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f9fafb;
  color: #111827;
  min-height: 100vh;
}

.container { max-width: 720px; margin: 0 auto; padding: 40px 24px; }

header { text-align: center; margin-bottom: 48px; }
header h1 { font-size: 24px; font-weight: 700; color: #111827; }

.overall-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 600; margin-top: 12px;
}
.badge-operational { background: #f0fdf4; color: #15803d; }
.badge-degraded    { background: #fffbeb; color: #b45309; }
.badge-outage      { background: #fef2f2; color: #b91c1c; }

.dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.dot-operational { background: #22c55e; }
.dot-degraded    { background: #f59e0b; }
.dot-outage      { background: #ef4444; }

.section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #6b7280; margin-bottom: 12px;
}

.components { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }

.component-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #f3f4f6;
}
.component-row:last-child { border-bottom: none; }
.component-name { font-size: 14px; font-weight: 500; color: #374151; }
.component-status { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.status-operational { color: #15803d; }
.status-degraded    { color: #b45309; }
.status-outage      { color: #b91c1c; }

.uptime { font-size: 12px; color: #9ca3af; margin-top: 2px; }

.updated-at {
  text-align: center; font-size: 12px; color: #9ca3af; margin-top: 24px;
}

.no-incidents {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 20px; text-align: center; font-size: 14px; color: #6b7280;
  margin-top: 24px;
}