/* Network status pill (§19 SHOW) — a small operational-status badge shown on
   /sim and in the /account portal. The colour is driven by an `is-<indicator>`
   class set by network-status-pill.js from our own /v1/network-status endpoint;
   the label text comes from that endpoint's bilingual description. No third
   party is referenced here. */

.network-status-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.network-status-caption {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.85;
}

.network-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.network-status-pill:hover,
.network-status-pill:focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
}

.network-status-pill[hidden] {
  display: none;
}

.network-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #9a9aae; /* neutral default until an indicator class lands */
  flex: 0 0 auto;
}

.network-status-pill.is-operationeel .network-status-dot {
  background: #29bf12; /* green */
}
.network-status-pill.is-verstoring .network-status-dot {
  background: #ff9914; /* amber */
}
.network-status-pill.is-storing .network-status-dot {
  background: #e5484d; /* red */
}
.network-status-pill.is-onderhoud .network-status-dot {
  background: #165df5; /* blue */
}
.network-status-pill.is-onbeschikbaar .network-status-dot {
  background: #9a9aae; /* grey */
}

.network-status-label {
  white-space: nowrap;
}