.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    width: 160px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    vertical-align: baseline;
    user-select: none
}

.badge.healthy {
    background: #27ae60;
    color: #ffffff
}

.badge.degraded {
    background: #f39c12;
    color: #ffffff
}

.badge.down {
    background: #e74c3c;
    color: #ffffff
}

.badge.maintenance {
  background-color: #1976d2;     /* same blue as maintenance banner */
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
}


.badge.investigating {
    background: #e6f0ff;
    color: #0845a0
}

.badge.issue_identified {
    background: #fff4d4;
    color: #8a6d1a
}

.badge.implementing_fix {
    background: #ede7f6;
    color: #5e35b1
}

.badge.resolved {
    background: #d9f6df;
    color: #256d30
}

.badge.planned {
    background: #d4e3ff;
    color: #1045a1
}

.badge.in_progress {
    background: #fff4d4;
    color: #8a6d1a
}

.badge.completed {
    background: #d9f6df;
    color: #256d30
}


/* =========================
   Overall status banner
   ========================= */

.overall-banner{
  color:#fff;
  padding: 28px 16px;
  text-align: center;
  border-radius: var(--radius);
  margin: 24px auto;             /* space below header */
  max-width: 960px;               /* align to container */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  animation: fadeInBanner .4s ease-out both;
}

.overall-banner h2{
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.overall-banner p{
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 400;
}

/* Banner colour themes */
.overall-banner.healthy  { background:#2e7d32; }
.overall-banner.degraded { background:#f9a825; }
.overall-banner.down     { background:#c62828; }
.overall-banner.maintenance { background:#1976d2; }


/* Consistent badge size inside the status column */
.service-status .badge{
  display: inline-block;
  width: 120px;           /* fixed for perfect vertical alignment */
  text-align: center;
  font-weight: 600;
  vertical-align: baseline;
}

/* Tints for the right column by status */
.service-status.healthy  { background: #e8f5e9; }  /* soft green */
.service-status.degraded { background: #fff8e1; }  /* soft amber */
.service-status.down     { background: #ffebee; }  /* soft red */
.service-status.maintenance { background: #bed7f4; } 

/* Scheduled Maintenance Banner (blue informational) */
.maintenance-banner {
  background: #1976d2 !important; /* enforce solid blue background */
  color: #fff;
  padding: 24px 16px;
  text-align: center;
  border-radius: 12px;
  margin: 16px auto;
  max-width: 960px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  animation: fadeInBanner 0.4s ease-out both;
}

.maintenance-banner h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.maintenance-banner p {
  margin: 6px 0 0;
  font-size: 1rem;
  font-weight: 400;
}

.maintenance-banner a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
}

.maintenance-banner a:hover {
  text-decoration: none;
}