/* Status Pills */

.status-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  margin-left: 0.5rem;
}

.status-pill.working {
  background-color: #e6f4ea;
  color: #1e7e34;
}

.status-pill.broken {
  background-color: #fce8e6;
  color: #c5221f;
}

.status-pill.superseded {
  background-color: #fff3e0;
  color: #e65100;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-pill.working {
    background-color: rgba(30, 126, 52, 0.2);
    color: #81c995;
  }

  :root:not([data-theme="light"]) .status-pill.broken {
    background-color: rgba(197, 34, 31, 0.2);
    color: #f28b82;
  }

  :root:not([data-theme="light"]) .status-pill.superseded {
    background-color: rgba(230, 81, 0, 0.2);
    color: #ffb74d;
  }
}

/* Forced dark mode colors */
:root[data-theme="dark"] .status-pill.working {
  background-color: rgba(30, 126, 52, 0.2);
  color: #81c995;
}

:root[data-theme="dark"] .status-pill.broken {
  background-color: rgba(197, 34, 31, 0.2);
  color: #f28b82;
}

:root[data-theme="dark"] .status-pill.superseded {
  background-color: rgba(230, 81, 0, 0.2);
  color: #ffb74d;
}

.superseded-info {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background-color: #fff3e0;
  border-left: 3px solid #e65100;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Dark mode for superseded info */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .superseded-info {
    background-color: rgba(230, 81, 0, 0.1);
    border-left-color: #ffb74d;
    color: var(--color-text);
  }
}

:root[data-theme="dark"] .superseded-info {
  background-color: rgba(230, 81, 0, 0.1);
  border-left-color: #ffb74d;
  color: var(--color-text);
}