/* shadcn/ui Components for Django Templates */

@layer components {
  /* Button Component */
  .btn {
    @apply inline-flex items-center justify-center rounded-xl text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-default {
    @apply bg-primary text-primary-foreground hover:bg-primary/90;
  }

  .btn-destructive {
    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
  }

  .btn-outline {
    @apply border border-input bg-background text-gray-900 hover:bg-accent hover:text-accent-foreground;
  }

  .btn-secondary {
    @apply bg-secondary text-gray-900 hover:bg-secondary/80 hover:text-black;
  }

  .btn-ghost {
    @apply hover:bg-accent hover:text-accent-foreground;
  }

  .btn-link {
    @apply text-primary underline-offset-4 hover:underline;
  }

  .btn-sm {
    @apply h-9 px-3;
  }

  .btn-md {
    @apply h-10 px-4 py-2;
    
  }

  .btn-lg {
    @apply h-11 px-8;
  }

  .btn-icon {
    @apply h-10 w-10;
  }

  /* Card Component */
  .card {
    @apply rounded-2xl border-2 border-pink-200 bg-card text-card-foreground shadow-md;
  }

  .card-header {
    @apply flex flex-col space-y-1.5 p-6;
  }

  .card-title {
    @apply text-2xl font-semibold leading-none tracking-tight;
  }

  .card-description {
    @apply text-sm text-muted-foreground;
  }

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

  .card-footer {
    @apply flex items-center p-6 pt-0;
  }

  /* Badge Component */
  .badge {
    @apply inline-flex items-center rounded-full border-2 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
  }

  .badge-default {
    @apply border-pink-300 bg-gradient-to-r from-pink-500 to-pink-600 text-white hover:from-pink-600 hover:to-pink-700 shadow-sm;
  }

  .badge-secondary {
    @apply border-pink-200 bg-gradient-to-r from-pink-100 to-pink-200 text-pink-800 hover:from-pink-200 hover:to-pink-300 shadow-sm;
  }

  .badge-destructive {
    @apply border-red-300 bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 shadow-sm;
  }

  .badge-outline {
    @apply border-pink-300 text-pink-700 bg-gradient-to-r from-white to-pink-50 hover:from-pink-50 hover:to-pink-100 shadow-sm;
  }

  /* Input Component */
  .input {
    @apply flex h-10 w-full rounded-xl border-2 border-pink-200 bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Label Component */
  .label {
    @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
  }

  /* Alert Component */
  .alert {
    @apply relative w-full rounded-lg border p-4;
  }

  .alert-destructive {
    @apply border-destructive/50 text-destructive dark:border-destructive;
  }

  .alert-default {
    @apply text-foreground;
  }

  /* Dialog/Modal Components */
  .dialog-overlay {
    @apply fixed inset-0 z-50 bg-black/80 backdrop-blur-sm;
  }

  .dialog-content {
    @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
  }

  .dialog-header {
    @apply flex flex-col space-y-1.5 text-center sm:text-left;
  }

  .dialog-title {
    @apply text-lg font-semibold leading-none tracking-tight;
  }

  .dialog-description {
    @apply text-sm text-muted-foreground;
  }

  .dialog-footer {
    @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
  }

  /* Navigation Components */
  .nav {
    @apply flex items-center space-x-4 lg:space-x-6;
  }

  .nav-link {
    @apply text-sm font-medium transition-colors hover:text-primary;
  }

  .nav-link.active {
    @apply text-primary;
  }

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

  .section {
    @apply py-12 sm:py-16 lg:py-20;
  }

  /* Utility Classes */
  .text-balance {
    text-wrap: balance;
  }

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

  @keyframes animate-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}