@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  @apply bg-slate-950 text-slate-100;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.container-wrap {
  @apply mx-auto max-w-4xl p-4 md:p-6;
}

.panel {
  @apply rounded-xl border border-slate-800 bg-slate-900/80 p-4;
}

.row-between {
  @apply mb-4 flex items-center justify-between gap-3;
}

.title-sm {
  @apply text-base font-semibold tracking-wide;
}

.section-title {
  @apply mb-2 text-xs uppercase tracking-[0.18em] text-slate-400;
}

.input {
  @apply w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-600 outline-none transition focus:border-slate-600;
}

.btn-subtle {
  @apply inline-flex items-center justify-center rounded-md border border-slate-700 bg-slate-900 px-3 py-1.5 text-xs text-slate-200 transition hover:border-slate-500 hover:text-white;
}

.link-list {
  @apply space-y-1;
}

.link-row {
  @apply flex items-center gap-3 rounded-md px-2 py-2 transition hover:bg-slate-800;
}

.link-icon {
  @apply grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-md border border-slate-700 bg-slate-900 text-xs font-semibold text-slate-300;
}

.link-icon-image {
  @apply h-full w-full object-contain;
}

.link-name {
  @apply block text-sm font-medium text-slate-100;
}

.link-description {
  @apply block truncate text-xs text-slate-500;
}

.admin-list {
  @apply divide-y divide-slate-800;
}

.admin-row {
  @apply flex items-center justify-between gap-3 py-2;
}
