@import "tailwindcss";

@layer base {
  body { @apply bg-slate-50 text-slate-900 antialiased; }
  h1 { @apply text-2xl font-semibold tracking-tight; }
  h2 { @apply text-lg font-semibold tracking-tight; }
  input, select, textarea { @apply rounded-md border border-slate-300 bg-white px-3 py-2 shadow-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200; }
  label { @apply text-sm font-medium text-slate-700; }
}

@layer components {
  .delivery-workspace { display: grid; gap: 1.5rem; }
  .delivery-graph { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center; }
  .delivery-node { @apply rounded-xl border-2 bg-white p-5 shadow-sm transition hover:shadow-md; }
  .delivery-node[data-state="healthy"] { @apply border-emerald-400; }
  .delivery-node[data-state="retrying"] { @apply border-amber-400; }
  .delivery-node[data-state="failed"] { @apply border-red-400; }
  .delivery-node[data-state="inactive"] { @apply border-slate-300; }
  .delivery-arrow { @apply hidden text-center text-3xl text-slate-300; }
  .delivery-destinations { display: grid; gap: 1rem; }
  .delivery-inspector { @apply min-h-64 rounded-xl border border-slate-200 bg-white p-5 shadow-sm; }

  @media (min-width: 1024px) {
    .delivery-workspace { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); align-items: start; }
    .delivery-graph { grid-template-columns: minmax(12rem, 1fr) 3rem minmax(12rem, 1fr) 3rem minmax(15rem, 1.35fr); }
    .delivery-arrow { display: block; }
    .delivery-inspector { position: sticky; top: 1.5rem; }
  }
}

@custom-variant dark (&:where(.dark, .dark *));
@layer components {
  .panel { @apply rounded-xl border border-slate-200 bg-white p-6 shadow-sm; }
  .page-heading { @apply flex flex-wrap items-center justify-between gap-4; }
  .eyebrow { @apply mb-2 text-xs font-semibold uppercase tracking-widest text-blue-600; }
  .muted { @apply text-sm text-slate-500; }
  .text-link { @apply text-sm font-medium text-blue-700 hover:underline; }
  .btn-primary { @apply inline-flex h-10 cursor-pointer items-center justify-center rounded-md border-0 bg-blue-600 px-4 text-sm font-medium text-white shadow-sm transition hover:bg-blue-700 hover:shadow-md active:translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 disabled:opacity-50; }
  .btn-secondary { @apply inline-flex h-10 cursor-pointer items-center justify-center rounded-md border-0 bg-slate-100 px-4 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-200 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/40; }
  .badge { @apply inline-flex shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600; }
  .record-row { @apply flex items-center justify-between gap-4 rounded-lg px-2 py-4 transition hover:bg-slate-50; }
  .empty-state { @apply py-12 text-center text-sm text-slate-500; }
  .pagination-link { @apply inline-flex h-10 min-w-10 items-center justify-center rounded-md px-3 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:text-slate-200 dark:hover:bg-slate-700; }
  .pagination-current { @apply bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200; }
  .stepper { @apply grid grid-cols-3 gap-2 rounded-xl bg-slate-100 p-2 text-center text-sm font-medium text-slate-500; }
  .stepper span { @apply rounded-lg p-3; }
  .stepper [aria-current="step"] { @apply bg-white text-blue-700 shadow-sm; }
  .advanced { @apply rounded-lg bg-slate-50 p-4 text-sm; }
  .advanced summary { @apply cursor-pointer font-medium; }
  .code-preview { @apply max-h-80 overflow-auto rounded-lg bg-slate-950 p-4 text-xs leading-relaxed text-slate-100 whitespace-pre-wrap break-all; }
  .code-editor { @apply relative grid min-h-96 overflow-auto rounded-lg bg-slate-950 font-mono text-sm leading-6; grid-template-columns: auto minmax(0, 1fr); }
  .code-editor-lines { @apply z-10 select-none overflow-hidden border-r border-slate-700 bg-slate-900 px-3 py-3 text-right text-slate-400 whitespace-pre; grid-column: 1; grid-row: 1; }
  .code-editor-highlight { @apply pointer-events-none z-10 overflow-hidden whitespace-pre px-4 py-3 text-slate-100; grid-column: 2; grid-row: 1; }
  .code-editor-input { @apply z-20 resize-none border-0 bg-transparent px-4 py-3 font-mono text-sm leading-6 text-transparent caret-white shadow-none focus:ring-0 whitespace-pre; grid-column: 2; grid-row: 1; -webkit-text-fill-color: transparent; }
  .code-editor-input::selection { @apply bg-blue-400/50; }
  .syntax-keyword { @apply text-blue-300; }
  .syntax-string { @apply text-emerald-300; }
  .syntax-comment { @apply text-slate-500; }
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select { @apply h-10; }
input[type="checkbox"], input[type="radio"] { @apply mr-2 h-4 w-4 accent-blue-600; }
button, input[type="submit"] { @apply border-0 shadow-sm; }
a:focus-visible, summary:focus-visible, button:focus-visible { @apply outline-2 outline-offset-2 outline-blue-500; }
.dark body { @apply bg-slate-950 text-slate-100; }
.dark .panel, .dark .bg-white, .dark .delivery-node, .dark .delivery-inspector { @apply border-slate-700 bg-slate-900; }
.dark input, .dark select, .dark textarea { @apply border-slate-600 bg-slate-900 text-slate-100; }
.dark .code-editor-input { @apply border-0 bg-transparent text-transparent; }
.dark label, .dark .text-slate-700, .dark .text-slate-600, .dark .text-slate-500, .dark .muted { @apply text-slate-300; }
.dark .advanced, .dark .stepper, .dark .bg-slate-50, .dark .bg-slate-100 { @apply bg-slate-800; }
.dark .btn-secondary, .dark .badge { @apply bg-slate-800 text-slate-200; }
.dark .btn-primary { @apply bg-blue-500 text-white; }
.dark .text-link, .dark .eyebrow, .dark .text-blue-700 { @apply text-blue-300; }
.dark .record-row:hover, .dark .btn-secondary:hover { @apply bg-slate-700; }
.dark .stepper [aria-current="step"] { @apply bg-slate-700 text-blue-200; }
.dark .border-slate-200, .dark .border-slate-300, .dark .divide-slate-100 > :not(:last-child), .dark .divide-slate-200 > :not(:last-child) { @apply border-slate-700; }

.dark .stepper { @apply text-slate-300; }