/*  static/css/status-bar.css  */
/* status bar — fixed selector and responsive wrapping */
#status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                 /* allow wrap on small screens */
  gap: 0.5rem 0.75rem;             /* row-gap col-gap */
  padding-inline: 0.5rem;
  height: 28px;                    /* desktop height */
  background-color: var(--bs-dark);
  color: var(--bs-body-color);
  font-size: 0.75rem;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-green  { background: #28a745; }
.dot-yellow { background: #ffc107; }
.dot-red    { background: #dc3545; }

/* mobile: let height grow and keep all dots visible */
@media (max-width: 575.98px) {
  #status-bar {
    height: auto;                  /* permit two-line layout */
    padding-block: 2px;
  }
}