/* Door Status Indicator – Button‑style visuals */

.door-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 1em;
  padding: 0.35em 0.75em;
  border-radius: 0.6em;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}

/* OPEN → light green background, dark green text */
.door-status-indicator.open {
  background: #d4edda;   /* light mint green */
  color: #155724;        /* dark evergreen */
  border: 1px solid #c3e6cb;
}

/* CLOSED → light red background, dark red text */
.door-status-indicator.closed {
  background: #f8d7da;   /* blush pink */
  color: #721c24;        /* maroon */
  border: 1px solid #f5c6cb;
}

/* Optional hover focus states for better UX */
.door-status-indicator.open:hover,
.door-status-indicator.open:focus {
  background: #c3e6cb;
}
.door-status-indicator.closed:hover,
.door-status-indicator.closed:focus {
  background: #f5c6cb;
}