/*
 * /settings/devices — pending approvals + device list.
 * Reuses .vault-shell grid, .topbar, .btn. Anything bespoke is below.
 */

.devices {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.devices__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  margin: 0;
}

.devices__loading {
  color: var(--color-muted);
  font-style: italic;
}

.devices__section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.devices__section-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.devices__sub {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: 62ch;
}

/* ---- Pending-approval cards ---- */
.approval-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.approval-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 2px rgba(139, 90, 60, 0.08);
}

.approval-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.approval-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
}
.approval-card__name strong {
  font-weight: var(--weight-semi);
  color: var(--color-fg);
}

.approval-card__loc {
  font-size: var(--text-sm);
}
.approval-card__times {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.approval-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ---- Device list table ---- */
.devices__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.devices__table th,
.devices__table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.devices__table th {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-surface-2);
  font-weight: var(--weight-semi);
}
.devices__table tbody tr:last-child td {
  border-bottom: 0;
}

.devices__cell-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semi);
  color: var(--color-fg);
}
.devices__cell-actions {
  text-align: right;
}

/* ---- Pills (platform + status + current marker) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-muted);
  text-transform: capitalize;
}
.pill--current {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
}
.pill--platform {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.pill--status { text-transform: capitalize; }
.pill--approved {
  color: var(--color-success);
  border-color: rgba(79, 140, 87, 0.35);
  background: rgba(79, 140, 87, 0.08);
}
.pill--pending {
  color: var(--color-accent);
  border-color: rgba(139, 90, 60, 0.35);
}
.pill--revoked {
  color: var(--color-destructive);
  border-color: rgba(176, 64, 64, 0.35);
}

@media (max-width: 720px) {
  .approval-card {
    flex-direction: column;
    align-items: stretch;
  }
  .approval-card__actions {
    justify-content: flex-end;
  }
}