/* PWA Device Info page */

.pwa-device-info {
  padding: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}

.pwa-device-info__heading {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-5) 0 var(--space-2);
}

.pwa-device-info__heading:first-child {
  margin-top: 0;
}

.pwa-device-info__card {
  background: var(--color-surface-100);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pwa-device-info__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

.pwa-device-info__row + .pwa-device-info__row {
  border-top: 1px solid var(--color-border-default);
}

.pwa-device-info__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.pwa-device-info__value {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: right;
}

.pwa-device-info__value--wrap {
  word-break: break-all;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Permission state colors */
.pwa-device-info__permission[data-state="granted"] {
  color: var(--color-brand);
}

.pwa-device-info__permission[data-state="denied"] {
  color: var(--color-danger);
}

.pwa-device-info__permission[data-state="prompt"] {
  color: var(--color-text-muted);
}

.pwa-device-info__permission[data-state="unavailable"] {
  color: var(--color-text-tertiary);
}