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

:root {
  color-scheme: light;
  --color-ink: #111827;
  --color-muted: #667085;
  --color-line: #e5e7eb;
  --color-canvas: #f8fafc;
  --color-panel: #ffffff;
  --color-brand: #2563eb;
}

html {
  min-height: 100%;
  background: #f6f8fb;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--color-ink);
  background:
    linear-gradient(180deg, #ffffff 0, var(--color-canvas) 220px),
    var(--color-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  min-width: 0;
}

table {
  border-collapse: collapse;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

@layer components {
  .field {
    @apply w-full rounded-md border border-line bg-white px-3 py-2 text-sm text-ink outline-none transition placeholder:text-slate-400 hover:border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500;
  }

  .label {
    @apply text-xs font-semibold uppercase tracking-normal text-slate-500;
  }

  .panel {
    @apply rounded-md border border-line bg-panel shadow-panel;
  }

  .btn {
    @apply inline-flex min-h-9 items-center justify-center gap-2 rounded-md border border-transparent px-3 py-2 text-sm font-semibold transition disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-100;
  }

  .btn-secondary {
    @apply btn border-line bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-100;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-100;
  }

  .table-head {
    @apply border-b border-line bg-slate-50 text-left text-xs font-semibold uppercase tracking-normal text-slate-500;
  }

  .table-cell {
    @apply border-b border-line px-3 py-3 text-sm text-slate-700;
  }

  .table-row {
    @apply transition-colors hover:bg-slate-50/70;
  }

  .badge {
    @apply inline-flex w-fit items-center rounded-md border border-line bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700;
  }

  .modal-panel {
    @apply max-h-[88vh] w-full max-w-4xl overflow-auto rounded-md border border-line bg-white p-5 shadow-2xl;
  }

  .action-modal > summary {
    @apply btn-secondary cursor-pointer px-2 py-1 text-xs;
  }

  .action-modal[open] {
    @apply fixed inset-0 z-50 grid place-items-center bg-slate-950/60 p-4;
  }

  .action-modal[open] > summary {
    @apply fixed inset-0 min-h-0 w-full rounded-none border-0 bg-transparent p-0 text-transparent shadow-none;
  }

  .action-modal[open] > summary::before {
    content: "";
    @apply absolute inset-0;
  }

  .action-modal[open] > form,
  .action-modal[open] > div {
    @apply relative z-10 max-h-[88vh] w-full max-w-4xl overflow-auto rounded-md border border-line bg-white p-5 shadow-2xl;
  }

  .detail-toggle > summary {
    @apply inline-flex cursor-pointer items-center justify-center rounded-md border border-line bg-white px-2 py-1 text-xs font-semibold text-blue-700 transition hover:bg-blue-50;
  }
}