@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap');

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

@layer components {
  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-lg text-white bg-brand-500 hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition-colors duration-150 cursor-pointer shadow-sm;
  }
  .btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-semibold rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition-colors duration-150 cursor-pointer shadow-sm;
  }
  .btn-danger {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-lg text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150 cursor-pointer shadow-sm;
  }
  .btn-cta {
    @apply inline-flex items-center justify-center px-5 py-2.5 border border-transparent text-sm font-bold rounded-lg text-white bg-cta hover:bg-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition-colors duration-150 cursor-pointer shadow-sm;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
  }
  .card-header {
    @apply px-6 py-4 border-b border-gray-100;
  }
  .card-body {
    @apply p-6;
  }

  /* Sidebar navigation */
  .sidebar-link {
    @apply flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors duration-150;
  }

  /* Sidebar collapsed state */
  [data-collapsed="true"] .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  [data-collapsed="true"] [data-sidebar-target~="linkText"],
  [data-collapsed="true"] [data-sidebar-target~="sectionLabel"],
  [data-collapsed="true"] [data-sidebar-target~="searchBox"],
  [data-collapsed="true"] [data-sidebar-target~="brandText"] {
    display: none !important;
  }
  .sidebar-link-admin {
    @apply text-gray-400 hover:text-white hover:bg-dark-lighter;
  }
  .sidebar-link-portal {
    @apply text-gray-400 hover:text-white hover:bg-dark-lighter;
  }
  .sidebar-link-active {
    @apply text-white bg-dark-lighter;
    border-left: 3px solid #EE7C1B;
  }
  .sidebar-section-label {
    @apply px-3 text-xs font-semibold text-brand-400 uppercase tracking-wider;
  }

  /* Tables */
  .table-wrapper {
    @apply card overflow-x-auto;
  }
  .table-header {
    @apply bg-gray-50 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider;
  }
  .table-header th {
    @apply px-6 py-3;
  }
  .table-row {
    @apply border-t border-gray-100 hover:bg-gray-50 transition-colors duration-100;
  }
  .table-row td {
    @apply px-6 py-4 text-sm text-gray-700;
  }
  .table-link {
    @apply text-brand-500 hover:text-brand-700 font-medium;
  }

  /* Form elements */
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  .form-input {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm transition-colors duration-150;
  }
  .form-select {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm transition-colors duration-150;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }
  .badge-brand {
    @apply bg-brand-100 text-brand-700;
  }
  .badge-success {
    @apply bg-success-50 text-success-700;
  }
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  .badge-danger {
    @apply bg-red-100 text-red-700;
  }
  .badge-info {
    @apply bg-blue-100 text-blue-700;
  }
  .badge-neutral {
    @apply bg-gray-100 text-gray-600;
  }

  /* Flash messages */
  .flash-notice {
    @apply bg-success-50 border border-success-500/30 text-success-700 rounded-xl px-4 py-3 mb-6 flex items-center gap-3;
  }
  .flash-alert {
    @apply bg-red-50 border border-red-300/30 text-red-700 rounded-xl px-4 py-3 mb-6 flex items-center gap-3;
  }

  /* Page sections */
  .page-header {
    @apply mb-8 flex items-center justify-between;
  }
  .page-title {
    @apply text-2xl font-bold font-heading text-gray-900;
  }

  /* KPI cards */
  .kpi-card {
    @apply card p-5;
  }
  .kpi-card-accent {
    @apply border-t-4;
  }

  /* Pagy pagination */
  .pagy nav {
    @apply flex items-center justify-center gap-1 mt-6;
  }
  .pagy nav a,
  .pagy nav .current {
    @apply inline-flex items-center justify-center min-w-[2rem] h-8 px-3 text-sm font-medium rounded-lg transition-colors duration-150;
  }
  .pagy nav a {
    @apply text-gray-600 hover:bg-brand-50 hover:text-brand-600;
  }
  .pagy nav .current {
    @apply bg-brand-500 text-white shadow-sm;
  }
  .pagy nav a.gap {
    @apply text-gray-400 pointer-events-none;
  }
}