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

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

  *:focus-visible {
    @apply outline-none ring-2 ring-slate-900/10 ring-offset-1;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-none ring-2 ring-slate-900/10 ring-offset-1;
  }

  ::selection {
    @apply bg-slate-900/10;
  }
}

@layer components {
  /* ── Layout ── */
  .page-container {
    @apply max-w-6xl mx-auto px-4 sm:px-6 py-6;
  }

  .page-header {
    @apply flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6;
  }

  .page-title {
    @apply text-page-title text-slate-900 tracking-tight;
  }

  .page-subtitle {
    @apply text-xs text-slate-500 mt-1;
  }

  /* ── Cards ── */
  .card {
    @apply bg-white rounded-card border border-slate-200/60 shadow-card overflow-hidden
           transition-shadow duration-normal ease-out;
  }

  .card-hover {
    @apply hover:shadow-card-hover;
  }

  .card-header {
    @apply px-4 py-3 border-b border-slate-200/60 flex items-center justify-between;
  }

  .card-header-title {
    @apply text-sm font-medium text-slate-900;
  }

  .card-body {
    @apply p-4;
  }

  .card-footer {
    @apply px-4 py-3 border-t border-slate-200/60;
  }

  /* ── Buttons ── */
  .btn {
    @apply inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium
           rounded-lg transition-all duration-normal ease-out
           focus-visible:ring-2 focus-visible:ring-slate-900/10 focus-visible:ring-offset-1;
  }

  .btn-primary {
    @apply btn bg-slate-900 text-white border border-transparent
           hover:bg-slate-800 active:bg-slate-950;
  }

  .btn-secondary {
    @apply btn bg-white text-slate-700 border border-slate-200
           hover:bg-slate-50 hover:border-slate-300 active:bg-slate-100;
  }

  .btn-danger {
    @apply btn bg-white text-red-600 border border-red-200
           hover:bg-red-50 hover:border-red-300 active:bg-red-100;
  }

  .btn-ghost {
    @apply btn bg-transparent text-slate-600 border border-transparent
           hover:bg-slate-100 hover:text-slate-900 active:bg-slate-200;
  }

  .btn-disabled {
    @apply btn bg-slate-100 text-slate-400 border border-transparent
           cursor-not-allowed pointer-events-none;
  }

  .btn-icon {
    @apply inline-flex items-center justify-center p-1.5
           rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100
           transition-all duration-normal ease-out;
  }

  /* ── Form Controls ── */
  .input {
    @apply block w-full rounded-lg border-slate-200 bg-white
           text-sm text-slate-900 placeholder-slate-400
           shadow-card
           focus:border-slate-300 focus:ring-2 focus:ring-slate-900/10
           transition-colors duration-normal ease-out;
  }

  .select-input {
    @apply appearance-none w-full rounded-lg border-slate-200 bg-white
           text-sm text-slate-700 pl-3 pr-10 py-2
           shadow-card
           focus:border-slate-300 focus:ring-2 focus:ring-slate-900/10
           transition-colors duration-normal ease-out;
  }

  .filter-select {
    @apply appearance-none pl-2 pr-6 py-2 sm:py-1.5 text-xs font-medium
           rounded-lg border border-slate-200 bg-white text-slate-700
           hover:bg-slate-50 hover:border-slate-300
           shadow-card
           focus:ring-2 focus:ring-slate-900/10 focus:border-slate-300
           transition-all duration-normal ease-out;
  }

  .label {
    @apply block text-xs font-medium text-slate-600 mb-1.5;
  }

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

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

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

  .badge-blue {
    @apply badge bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-200/60;
  }

  .badge-amber {
    @apply badge bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200/60;
  }

  .badge-slate {
    @apply badge bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-200/60;
  }

  .badge-orange {
    @apply badge bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-200/60;
  }

  .badge-purple {
    @apply badge bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-200/60;
  }

  /* ── Dropdowns ── */
  .dropdown-panel {
    @apply bg-white rounded-card border border-slate-200/60 shadow-dropdown
           py-1 overflow-hidden;
  }

  .dropdown-item {
    @apply flex items-center px-3 py-2 text-sm text-slate-700
           hover:bg-slate-50 transition-colors duration-fast;
  }

  .dropdown-divider {
    @apply border-t border-slate-100 my-1;
  }

  /* ── Modals ── */
  .modal-backdrop {
    @apply fixed inset-0 bg-slate-900/40 backdrop-blur-[2px] z-50
           flex items-center justify-center p-4;
  }

  .modal-backdrop.is-open {
    animation: backdropIn 200ms ease-out;
  }

  .modal-panel {
    @apply bg-white rounded-card shadow-modal w-full
           animate-modal-in;
  }

  .modal-panel-sm {
    @apply modal-panel max-w-md;
  }

  .modal-panel-md {
    @apply modal-panel max-w-lg;
  }

  .modal-panel-lg {
    @apply modal-panel max-w-2xl;
  }

  .modal-header {
    @apply px-5 py-4 border-b border-slate-200/60 flex items-center justify-between;
  }

  .modal-header-title {
    @apply text-sm font-semibold text-slate-900;
  }

  .modal-body {
    @apply p-5;
  }

  .modal-footer {
    @apply px-5 py-4 border-t border-slate-200/60 flex justify-end gap-2;
  }

  /* ── Tables ── */
  .table-container {
    @apply card overflow-hidden;
  }

  .table-base {
    @apply min-w-full divide-y divide-slate-200/60;
  }

  .table-head {
    @apply bg-slate-50/80;
  }

  .table-th {
    @apply px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider;
  }

  .table-td {
    @apply px-4 py-3.5 whitespace-nowrap text-sm;
  }

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

  /* ── Empty States ── */
  .empty-state {
    @apply py-10 text-center;
  }

  .empty-state-icon {
    @apply inline-flex items-center justify-center p-3 rounded-xl bg-slate-100 mb-3;
  }

  .empty-state-title {
    @apply text-sm font-medium text-slate-900 mb-1;
  }

  .empty-state-text {
    @apply text-xs text-slate-500 mb-4 max-w-sm mx-auto;
  }

  /* ── Callouts ── */
  .callout-blue {
    @apply bg-blue-50/80 rounded-card p-4 border border-blue-200/60;
  }

  /* ── Filter Badges ── */
  .filter-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
  }

  /* ── Metric Cards ── */
  .metric-card {
    @apply card card-hover px-4 py-3 cursor-pointer;
  }

  /* ── Divider ── */
  .divider {
    @apply border-t border-slate-200/60;
  }

  /* ── Nav Link ── */
  .nav-link {
    @apply px-2.5 py-1 text-sm font-medium rounded-md
           transition-colors duration-fast;
  }

  .nav-link-active {
    @apply nav-link bg-slate-100 text-slate-900;
  }

  .nav-link-inactive {
    @apply nav-link text-slate-500 hover:text-slate-900 hover: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.
 *


 */