@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

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

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-teal-500 ring-offset-1;
  }
}

@layer components {
  /* Pagy pagination */
  .pagy nav {
    @apply flex items-center gap-1;
  }
  .pagy nav a,
  .pagy nav span {
    @apply inline-flex items-center justify-center w-8 h-8 text-sm rounded-lg border border-stone-200 text-slate-600 hover:bg-stone-50 transition-colors;
  }
  .pagy nav span.current {
    @apply bg-teal-600 text-white border-teal-600 font-semibold;
  }
  .pagy nav span.disabled {
    @apply text-slate-300 cursor-not-allowed hover:bg-transparent;
  }

  /* Table base */
  .crm-table {
    @apply w-full text-sm border-collapse;
  }
  .crm-table th {
    @apply text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide bg-stone-50 border-b border-stone-200;
  }
  .crm-table td {
    @apply px-4 py-3.5 border-b border-stone-100 text-slate-700;
  }
  .crm-table tr:last-child td {
    @apply border-b-0;
  }
  .crm-table tr:hover td {
    @apply bg-stone-50;
  }
}

@layer utilities {
  .font-serif {
    font-family: "DM Serif Display", ui-serif, Georgia, serif;
  }

  /* Smooth page transitions with Turbo */
  .turbo-progress-bar {
    background-color: #2D8F7B;
    height: 3px;
  }
}