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

@layer base {
  body {
    @apply text-gray-800 antialiased;
  }

  h1 { @apply text-2xl font-bold tracking-tight text-gray-900; }
  h2 { @apply text-xl font-semibold tracking-tight text-gray-900; }
  h3 { @apply text-lg font-semibold text-gray-900; }
}

@layer components {
  /* ── Buttons ── */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-lg
           shadow-sm transition-all duration-200 ease-out cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded-md;
  }

  .btn-lg {
    @apply px-6 py-3 text-base rounded-xl;
  }

  /* ── Form Controls ── */
  .form-input {
    @apply block w-full px-3.5 py-2.5 text-sm text-gray-900 bg-white
           border border-gray-300 rounded-lg
           placeholder:text-gray-400
           focus:border-accent-500 focus:ring-2 focus:ring-accent-100 focus:outline-none
           transition duration-200;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }

  .form-select {
    @apply block w-full px-3.5 py-2.5 pr-10 text-sm text-gray-900 bg-white
           border border-gray-300 rounded-lg
           focus:border-accent-500 focus:ring-2 focus:ring-accent-100 focus:outline-none
           transition duration-200;
  }

  /* ── Cards ── */
  .card {
    @apply bg-white rounded-xl border border-gray-200 shadow-card;
  }

  .card-hover {
    @apply hover:shadow-card-hover hover:border-gray-300 transition-all duration-300;
  }

  /* ── Page sections ── */
  .page-header {
    @apply mb-8;
  }

  .page-title {
    @apply text-2xl font-bold text-gray-900 tracking-tight;
  }

  .page-subtitle {
    @apply mt-1 text-sm text-gray-500;
  }

  /* ── Tables ── */
  .table-wrapper {
    @apply rounded-xl border border-gray-200 bg-white shadow-card overflow-x-auto;
  }

  /* ── Inline delete forms (button_to wraps in a <form>) ── */
  .flex form,
  td form {
    display: inline;
  }

  /* ── Draggable ── */
  .draggable-mirror .dragging--hidden {
    display: none;
  }

  /* ── Sort indicators ── */
  .table th a {
    @apply no-underline;
  }

  .table .asc a::after,
  .table .desc a::after {
    @apply inline-block ml-1 text-brand-500;
    font-size: 0.625rem;
    vertical-align: middle;
  }

  .table .asc a::after {
    content: "\25B2";
  }

  .table .desc a::after {
    content: "\25BC";
  }
}

@layer utilities {
  /* ── Button variants ── */
  .btn-primary {
    @apply bg-accent-500 text-white
           hover:bg-accent-600
           focus:ring-accent-500 active:bg-accent-700
           shadow-md hover:shadow-lg;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300
           hover:bg-gray-50 hover:border-gray-400
           focus:ring-gray-300 active:bg-gray-100;
  }

  .btn-success {
    @apply bg-emerald-600 text-white
           hover:bg-emerald-700
           focus:ring-emerald-500 shadow-md hover:shadow-lg;
  }

  .btn-danger {
    @apply bg-red-600 text-white
           hover:bg-red-700
           focus:ring-red-500 shadow-md hover:shadow-lg;
  }

  .btn-ghost {
    @apply bg-transparent text-gray-600 shadow-none
           hover:bg-gray-100 focus:ring-gray-300;
  }

  .btn-brand {
    @apply bg-brand-400 text-gray-900 font-bold
           hover:bg-brand-500
           focus:ring-brand-400 shadow-md hover:shadow-lg;
  }

  .btn-white {
    @apply bg-white text-accent-700 border border-white/50
           hover:bg-gray-50 focus:ring-white shadow-md;
  }

  /* ── Badges ── */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }

  .badge-blue {
    @apply bg-accent-50 text-accent-700 ring-1 ring-inset ring-accent-600/20;
  }

  .badge-green {
    @apply bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20;
  }

  .badge-yellow {
    @apply bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-600/20;
  }

  .badge-red {
    @apply bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20;
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-600 ring-1 ring-inset ring-gray-500/10;
  }

  /* ── Gradient backgrounds ── */
  .bg-brand-dark {
    @apply bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900;
  }

  .bg-brand-hero {
    @apply bg-gradient-to-r from-brand-500 via-brand-400 to-brand-300;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */