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

@layer base {
  body {
    @apply bg-slate-50 text-slate-800 antialiased;
  }

  h1, h2, h3 {
    @apply tracking-tight text-slate-900;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5
           text-sm font-semibold transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5
           text-sm font-semibold transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2
           bg-blue-700 text-white shadow-sm
           hover:bg-blue-800 focus:ring-blue-500;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5
           text-sm font-semibold transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2
           bg-white text-slate-700 border border-slate-300
           hover:bg-slate-50 focus:ring-slate-300;
  }

  .card {
    @apply bg-white rounded-2xl border border-slate-200 shadow-card;
  }

  .card-link {
    @apply block bg-white rounded-2xl border border-slate-200 shadow-card
           transition-all duration-150
           hover:shadow-card-hover hover:-translate-y-0.5 hover:border-slate-300;
  }

  .badge {
    @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full
           text-xs font-semibold uppercase tracking-wide;
  }

  .badge-live {
    @apply bg-emerald-100 text-emerald-700;
  }

  .badge-archived {
    @apply bg-slate-100 text-slate-600;
  }

  .badge-legacy {
    @apply bg-slate-200 text-slate-700;
  }

  .link {
    @apply text-slate-900 font-medium underline-offset-2 hover:text-blue-700 hover:underline transition-colors;
  }

  .data-table {
    @apply w-full text-sm;
  }

  .data-table thead th {
    @apply px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide
           text-slate-500 bg-slate-50 border-b border-slate-200;
  }

  .data-table tbody td {
    @apply px-5 py-3 border-b border-slate-100;
  }

  .data-table tbody tr:hover {
    @apply bg-slate-50;
  }
}
/*
 * 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.
 *


 */

.bonus-table th,
.bonus-table td {
  padding: 0.5rem 0.5rem;
  border: 1px solid #e2e8f0;
}

.overflow-table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 1.125rem;
  background-color: #fff;
}

.overflow-table-container table {
  width: 100%;
}

.overflow-table-container th:first-child,
.overflow-table-container td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #fff;
}

.overflow-table-container tr:hover td:first-child {
  background-color: #f8fafc !important;
}