/* styles.css — Companion to Tailwind CDN for dynamic/JS-injected elements */

/* ── Hidden utility (JS toggle) ── */
.hidden { display: none !important; }

/* ── Sidebar mobile open ── */
.sidebar.open { transform: translateX(0) !important; }
#sidebarOverlay.open { display: block !important; }

/* ── Toast animation ── */
.toast:not(.hidden) {
  display: block;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Table rows (injected via JS) ── */
#tokensBody tr {
  transition: background-color 0.1s;
}
#tokensBody tr:hover {
  background-color: #f8f9fa;
}
#tokensBody td {
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  color: #495057;
  white-space: nowrap;
}
#tokensBody td:first-child {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  color: #868e96;
}
#tokensBody td code {
  font-size: 0.75rem;
  background: #f1f3f5;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #495057;
}
#tokensBody td strong {
  font-weight: 600;
  color: #212529;
}

/* ── Status badges ── */
.status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status.active {
  background: #d3f9d8;
  color: #2b8a3e;
}
.status.revoked {
  background: #ffe3e3;
  color: #c92a2a;
}

/* ── Token action buttons (injected via JS) ── */
.token-actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.token-actions button,
#newTokenPanel button {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: all 0.15s;
}
.token-actions button:hover,
#newTokenPanel button:hover {
  background: #f1f3f5;
  border-color: #ced4da;
}
.token-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.token-actions button[data-rv]:not(:disabled) {
  color: #c92a2a;
  border-color: #ffc9c9;
}
.token-actions button[data-rv]:not(:disabled):hover {
  background: #fff5f5;
}

/* ── New token panel (injected HTML) ── */
#newTokenPanel code {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.375rem 0.625rem;
  background: #f1f3f5;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  word-break: break-all;
  color: #212529;
}
#newTokenPanel strong {
  font-weight: 600;
}

/* ── Profile section (injected HTML) ── */
#profile strong {
  font-weight: 600;
  color: #212529;
  font-size: 0.75rem;
}
#profile span {
  color: #868e96;
  font-size: 0.6875rem;
}

/* ── Responsive tweaks ── */
@media (max-width: 639px) {
  #tokensBody td {
    padding: 0.5rem 0.75rem;
  }
  .token-actions {
    gap: 0.25rem;
  }
}