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

/* ─── Pagination (Pagy) ───────────────────────────────────────── */

.pagy-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

.pagy-nav .page {
  display: inline-block;
  line-height: 1;
}

/* Base style shared by all page controls */
.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Default page link */
.pagy-nav .page a {
  color: #374151;
  background: #fff;
}

.pagy-nav .page a:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* Current page */
.pagy-nav .page.active {
  color: #fff;
  background: #b91c1c;
  border-color: #b91c1c;
  font-weight: 700;
  box-shadow: 0 1px 5px rgba(185, 28, 28, 0.35);
  pointer-events: none;
}

/* Disabled prev / next */
.pagy-nav .page.disabled {
  color: #d1d5db;
  background: #fafafa;
  border-color: #f3f4f6;
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
}

/* Ellipsis gap */
.pagy-nav .page.gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 4px;
  font-size: 0.75rem;
  color: #9ca3af;
  border: none;
  background: none;
}

/* Prev / Next get slightly wider padding */
.pagy-nav .page.prev a,
.pagy-nav .page.next a,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled {
  padding: 0 11px;
  color: #6b7280;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.pagy-nav .page.prev a:hover,
.pagy-nav .page.next a:hover {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fca5a5;
}

/* ─── Site header ─────────────────────────────────────────────── */

.site-header {
  position: relative;
  background: linear-gradient(180deg, #9b1515 0%, #7a0f0f 100%);
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.4);
}

/* Amber accent rule at the bottom edge */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(251, 146, 60, 0.5) 15%,
    rgba(251, 146, 60, 1) 35%,
    rgba(253, 186, 116, 1) 50%,
    rgba(251, 146, 60, 1) 65%,
    rgba(251, 146, 60, 0.5) 85%,
    transparent 100%
  );
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.site-logo:hover {
  opacity: 0.75;
}

.site-logo svg {
  display: block;
}

.nav-link {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.92);
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link-active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
  font-weight: 600;
}

.nav-sep {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, 0.18);
  vertical-align: middle;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────── */

@layer components {
  .fieldError {
    @apply text-red-600 font-semibold text-xs ml-1;
  }

  .autocomplete-results {
    position: absolute;
    z-index: 10;
    min-width: 200px;
  }

  [data-controller="autocomplete"] {
    position: relative;
  }

  .autocomplete-results li {
    @apply px-3 py-1.5 cursor-pointer hover:bg-red-50 text-sm;
  }

  .form-input {
    @apply border border-gray-300 rounded-md px-3 py-1.5 text-sm
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent
           transition-shadow;
  }

  .form-select {
    @apply border border-gray-300 rounded-md px-3 py-1.5 text-sm bg-white
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent
           transition-shadow;
  }

  .btn-primary {
    @apply inline-block bg-red-700 text-white px-4 py-1.5 rounded text-sm font-medium
           hover:bg-red-800 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1;
  }

  .btn-secondary {
    @apply inline-block bg-white border border-gray-300 text-gray-700 px-4 py-1.5 rounded text-sm font-medium
           hover:bg-gray-50 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-1;
  }

  .btn-success {
    @apply inline-block bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium
           hover:bg-green-800 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1;
  }

  .btn-warning {
    @apply inline-block bg-amber-500 text-white px-4 py-1.5 rounded text-sm font-medium
           hover:bg-amber-600 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1;
  }

  .card {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm;
  }

  .section-heading {
    @apply text-xs font-semibold text-gray-400 uppercase tracking-wider pb-1 border-b border-gray-100 mb-2;
  }

  .alert-error {
    @apply bg-red-50 border border-red-300 text-red-700 rounded-md px-4 py-2 text-sm font-medium;
  }

  .alert-notice {
    @apply bg-green-50 border border-green-300 text-green-700 rounded-md px-4 py-2 text-sm;
  }
}

@media print {
  .page-break-before { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}
/*
 * 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.
 *


 */