@import "tailwindcss";
@plugin "@tailwindcss/forms" {
  strategy: "base"; /* or "class" */
}
@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  [role="button"] {
    cursor: pointer;
  }
}

@theme {
  /* Font families */
  --font-sans: 'Inter var', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  
  /* Primary color palette */
  --color-primary-50: #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-200: #ddd6fe;
  --color-primary-300: #c4b5fd;
  --color-primary-400: #a78bfa;
  --color-primary-500: #7D40E7;
  --color-primary-600: #6d28d9;
  --color-primary-700: #5b21b6;
  --color-primary-800: #4c1d95;
  --color-primary-900: #3c1764;
  --color-primary: #7D40E7;
  
  /* Background colors */
  --color-background: #ffffff;
  --color-background-dark: #111827;
}

@layer components {
  /* Pagy pagination styles */
  .pagy.nav {
    @apply flex space-x-2 items-center justify-center;
  }

  .pagy.nav a {
    @apply inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 dark:text-primary-400 dark:bg-primary-900/30 dark:hover:bg-primary-900/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .pagy.nav a[aria-disabled="true"],
  .pagy.nav a:not([href]) {
    @apply text-gray-400 bg-gray-100 dark:text-gray-600 dark:bg-gray-800 cursor-default hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-0;
  }

  .pagy.nav a.current {
    @apply text-white bg-primary-600 hover:bg-primary-600 dark:bg-primary-600 dark:hover:bg-primary-600 dark:text-white;
  }

  .btn {
    @apply inline-flex justify-center items-center px-4 py-2 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50;
  }

  .btn-default {
    @apply bg-primary text-white hover:bg-primary-600 focus:ring-primary-500 border border-transparent;
  }

  .btn-outline {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-primary-500 shadow-sm dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 dark:hover:bg-gray-700;
  }

  .btn--plain {
    @apply p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg focus:ring-primary-500;
  }

  .btn--icon {
    @apply p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full focus:ring-primary-500;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge--positive {
    @apply bg-green-100 text-green-800;
  }

  .badge--negative {
    @apply bg-red-100 text-red-800;
  }

  .badge-outline {
    @apply border border-gray-300 text-gray-700 dark:text-gray-300 dark:border-gray-600;
  }

  .card {
    @apply bg-white shadow rounded-lg dark:bg-gray-800 dark:shadow-gray-900/50;
  }

  .card-content {
    @apply p-6;
  }

  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  .input {
    @apply block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-600 dark:placeholder:text-gray-500;
  }

  .label {
    @apply block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100;
  }

  .alert {
    @apply p-4 rounded-lg;
  }

  .alert--positive {
    @apply bg-green-50 text-green-800 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800;
  }

  .alert--negative {
    @apply bg-red-50 text-red-800 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800;
  }

  /* Form group spacing */
  .field {
    @apply space-y-2;
  }

  /* Form error styles */
  .field_with_errors .input {
    @apply ring-red-500 focus:ring-red-500;
  }

  .field_with_errors .label {
    @apply text-red-600;
  }
}

@layer utilities {
  .text-subtle {
    @apply text-gray-500;
  }

  .text-destructive {
    @apply text-red-600;
  }

  .mis-2 {
    @apply ml-2 rtl:mr-2;
  }

  .mis-4 {
    @apply ml-4 rtl:mr-4;
  }

  .mie-2 {
    @apply mr-2 rtl:ml-2;
  }

  .mie-4 {
    @apply mr-4 rtl:ml-4;
  }

  /* Shake animation for incorrect password */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
  }

  .animate-shake {
    animation: shake 0.5s ease-in-out;
  }

  /* Improved modal animations */
  .modal-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }

  .modal-backdrop-enter {
    transition: opacity 200ms ease-out;
  }

  /* View Transitions - Slide-over panel */
  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slide-out-right {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* View Transitions for slide-over panel */
  ::view-transition-old(slide-over-panel) {
    animation: slide-out-right 0.2s ease-out;
  }

  ::view-transition-new(slide-over-panel) {
    animation: slide-in-right 0.2s ease-out;
  }

  ::view-transition-old(slide-over-backdrop) {
    animation: fade-out 0.15s ease-out;
  }

  ::view-transition-new(slide-over-backdrop) {
    animation: fade-in 0.15s ease-out;
  }

  /* Slide-over enter animation (CSS-based fallback) */
  .slide-over-enter {
    animation: slide-in-right 0.2s ease-out;
  }

  .slide-over-backdrop-enter {
    animation: fade-in 0.15s ease-out;
  }
}