@import "tailwindcss";

/* Enable View Transitions API for MPA navigation */
@view-transition {
  navigation: auto;
}

@theme {
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
}

@layer base {
  /* Custom scrollbar that doesn't take up horizontal space */
  html {
    scrollbar-gutter: stable;
  }

  /* Webkit scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.3);
  }

  /* Firefox scrollbar styling */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5% 64.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 90%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 240 5% 64.9%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 240 4.9% 83.9%;
  }
}

/* Sidebar utility classes */
.bg-sidebar-accent {
  background-color: hsl(var(--sidebar-accent));
}
.text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}
.bg-sidebar {
  background-color: hsl(var(--sidebar-background));
}
.text-sidebar-foreground {
  color: hsl(var(--sidebar-foreground));
}
.ring-sidebar-ring {
  --tw-ring-color: hsl(var(--sidebar-ring));
}

/* Sidebar hover utilities */
.hover\:bg-sidebar-accent {
  &:hover {
    @media (hover: hover) {
      background-color: hsl(var(--sidebar-accent));
    }
  }
}
.hover\:text-sidebar-accent-foreground {
  &:hover {
    @media (hover: hover) {
      color: hsl(var(--sidebar-accent-foreground));
    }
  }
}

/* Sidebar focus-visible utilities */
.focus-visible\:bg-sidebar-accent {
  &:focus-visible {
    background-color: hsl(var(--sidebar-accent));
  }
}
.focus-visible\:text-sidebar-accent-foreground {
  &:focus-visible {
    color: hsl(var(--sidebar-accent-foreground));
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    overscroll-behavior: none;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  a {
    cursor: pointer;
  }

  /* Custom scrollbar styling */
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 5px;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  @position-fallback --fallback {
    @try {
      top: anchor(bottom);
      left: anchor(center);
      translate: -50% 8px;
    }

    @try {
      top: anchor(top);
      left: anchor(center);
      translate: -50% -100%;
      margin-top: -8px;
    }

    @try {
      top: anchor(center);
      left: anchor(right);
      translate: 8px -50%;
    }

    @try {
      top: anchor(center);
      left: anchor(left);
      translate: -100% -50%;
      margin-left: -8px;
    }
  }

  .anchor-positioned {
    position: absolute;
    position-fallback: --fallback;
  }

  @position-fallback --fallback {
    @try {
      top: anchor(bottom);
      left: anchor(center);
      translate: -50% 8px;
    }
    @try {
      top: anchor(top);
      left: anchor(center);
      translate: -50% -100%;
      margin-top: -8px;
    }
    @try {
      top: anchor(center);
      left: anchor(right);
      translate: 8px -50%;
    }
    @try {
      top: anchor(center);
      left: anchor(left);
      translate: -100% -50%;
      margin-left: -8px;
    }
  }

  /* Data-class example styles */
  .anchor-trigger.positioning {
    box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
  }

  .anchor-positioned.positioning {
    border: 2px solid rgb(59 130 246);
    background: rgb(59 130 246 / 0.05);
  }

  /* Native Popover API animations */
  [popover] {
    opacity: 0;
    transform: scale(0.95);
    transition:
      opacity 200ms ease-out,
      transform 200ms ease-out,
      overlay 200ms allow-discrete,
      display 200ms allow-discrete;
  }

  [popover]:popover-open {
    opacity: 1;
    transform: scale(1);

    @starting-style {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  /* Ensure all form inputs have proper text colors */
  input,
  textarea,
  select {
    color: hsl(var(--foreground));
  }

  input::placeholder,
  textarea::placeholder {
    color: hsl(var(--muted-foreground));
  }
}

@layer utilities {
  .step {
    counter-increment: step;
  }

  .step:before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    background-color: hsl(var(--muted));
    border: 4px solid hsl(var(--background));
    border-radius: 9999px;
    font-family:
      ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
      Menlo, monospace;
    font-weight: 500;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    text-indent: -1px;
  }

  @media (min-width: 768px) {
    .step:before {
      position: absolute;
      width: 2.25rem;
      height: 2.25rem;
      margin-left: -50px;
      margin-top: -4px;
    }
  }

  .chunk-container {
    box-shadow: none;
  }

  .chunk-container::after {
    content: "";
    position: absolute;
    inset: -1rem;
    box-shadow:
      0 20px 25px -5px rgb(0 0 0 / 0.1),
      0 8px 10px -6px rgb(0 0 0 / 0.1);
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .border-grid {
    border-color: hsl(var(--border) / 0.5);
    border-style: dashed;
  }

  .dark .border-grid {
    border-color: hsl(var(--border));
  }

  .container-wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-style: dashed;
    border-color: hsl(var(--border) / 0.7);
  }

  .dark .container-wrapper {
    border-color: hsl(var(--border));
  }

  @media (min-width: 1400px) {
    .container-wrapper {
      border-left-width: 1px;
      border-right-width: 1px;
    }
  }

  @media (min-width: 1800px) {
    .container-wrapper {
      max-width: 1536px;
    }
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1536px;
    width: 100%;
  }

  @media (min-width: 1280px) {
    .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  /* Ensure form elements in dialogs are interactive */
  [role="dialog"] input,
  [role="dialog"] textarea,
  [role="dialog"] select,
  [role="dialog"] button {
    pointer-events: auto;
    z-index: 51;
    position: relative;
  }

  /* Ensure form elements have proper focus styles and text colors */
  [role="dialog"] input:focus-visible,
  [role="dialog"] textarea:focus-visible,
  [role="dialog"] select:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    z-index: 52;
  }

  /* Dialog show animation */
  @keyframes dialog-show {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  [role="dialog"][data-state="open"] {
    animation: dialog-show 0.2s ease-out;
  }

  /* tailwindcss-animate plugin implementation */

  /* Core keyframes from tailwindcss-animate */
  @keyframes enter {
    from {
      opacity: var(--tw-enter-opacity, 1);
      transform: translate3d(
          var(--tw-enter-translate-x, 0),
          var(--tw-enter-translate-y, 0),
          0
        )
        scale3d(
          var(--tw-enter-scale, 1),
          var(--tw-enter-scale, 1),
          var(--tw-enter-scale, 1)
        )
        rotate(var(--tw-enter-rotate, 0));
    }
  }

  @keyframes exit {
    to {
      opacity: var(--tw-exit-opacity, 1);
      transform: translate3d(
          var(--tw-exit-translate-x, 0),
          var(--tw-exit-translate-y, 0),
          0
        )
        scale3d(
          var(--tw-exit-scale, 1),
          var(--tw-exit-scale, 1),
          var(--tw-exit-scale, 1)
        )
        rotate(var(--tw-exit-rotate, 0));
    }
  }

  /* Standard Tailwind animations */
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes ping {
    75%,
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }

  @keyframes bounce {
    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  /* Additional keyframes for UI components */
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  /* Base animation classes */
  .animate-in {
    animation-name: enter;
    animation-duration: 150ms;
    animation-timing-function: ease;
    animation-fill-mode: both;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
  }

  .animate-out {
    animation-name: exit;
    animation-duration: 150ms;
    animation-timing-function: ease;
    animation-fill-mode: both;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial;
  }

  /* Standard Tailwind animation utilities */
  .animate-none {
    animation: none;
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  .animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-bounce {
    animation: bounce 1s infinite;
  }

  /* Accordion animations */
  .animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
  }

  .animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
  }

  /* Fade utilities */
  .fade-in {
    --tw-enter-opacity: 0;
  }
  .fade-in-0 {
    --tw-enter-opacity: 0;
  }
  .fade-in-5 {
    --tw-enter-opacity: 0.05;
  }
  .fade-in-10 {
    --tw-enter-opacity: 0.1;
  }
  .fade-in-20 {
    --tw-enter-opacity: 0.2;
  }
  .fade-in-25 {
    --tw-enter-opacity: 0.25;
  }
  .fade-in-30 {
    --tw-enter-opacity: 0.3;
  }
  .fade-in-40 {
    --tw-enter-opacity: 0.4;
  }
  .fade-in-50 {
    --tw-enter-opacity: 0.5;
  }
  .fade-in-60 {
    --tw-enter-opacity: 0.6;
  }
  .fade-in-70 {
    --tw-enter-opacity: 0.7;
  }
  .fade-in-75 {
    --tw-enter-opacity: 0.75;
  }
  .fade-in-80 {
    --tw-enter-opacity: 0.8;
  }
  .fade-in-90 {
    --tw-enter-opacity: 0.9;
  }
  .fade-in-95 {
    --tw-enter-opacity: 0.95;
  }
  .fade-in-100 {
    --tw-enter-opacity: 1;
  }

  .fade-out {
    --tw-exit-opacity: 0;
  }
  .fade-out-0 {
    --tw-exit-opacity: 0;
  }
  .fade-out-5 {
    --tw-exit-opacity: 0.05;
  }
  .fade-out-10 {
    --tw-exit-opacity: 0.1;
  }
  .fade-out-20 {
    --tw-exit-opacity: 0.2;
  }
  .fade-out-25 {
    --tw-exit-opacity: 0.25;
  }
  .fade-out-30 {
    --tw-exit-opacity: 0.3;
  }
  .fade-out-40 {
    --tw-exit-opacity: 0.4;
  }
  .fade-out-50 {
    --tw-exit-opacity: 0.5;
  }
  .fade-out-60 {
    --tw-exit-opacity: 0.6;
  }
  .fade-out-70 {
    --tw-exit-opacity: 0.7;
  }
  .fade-out-75 {
    --tw-exit-opacity: 0.75;
  }
  .fade-out-80 {
    --tw-exit-opacity: 0.8;
  }
  .fade-out-90 {
    --tw-exit-opacity: 0.9;
  }
  .fade-out-95 {
    --tw-exit-opacity: 0.95;
  }
  .fade-out-100 {
    --tw-exit-opacity: 1;
  }

  /* Zoom utilities */
  .zoom-in {
    --tw-enter-scale: 0;
  }
  .zoom-in-0 {
    --tw-enter-scale: 0;
  }
  .zoom-in-50 {
    --tw-enter-scale: 0.5;
  }
  .zoom-in-75 {
    --tw-enter-scale: 0.75;
  }
  .zoom-in-90 {
    --tw-enter-scale: 0.9;
  }
  .zoom-in-95 {
    --tw-enter-scale: 0.95;
  }
  .zoom-in-100 {
    --tw-enter-scale: 1;
  }
  .zoom-in-105 {
    --tw-enter-scale: 1.05;
  }
  .zoom-in-110 {
    --tw-enter-scale: 1.1;
  }
  .zoom-in-125 {
    --tw-enter-scale: 1.25;
  }
  .zoom-in-150 {
    --tw-enter-scale: 1.5;
  }

  .zoom-out {
    --tw-exit-scale: 0;
  }
  .zoom-out-0 {
    --tw-exit-scale: 0;
  }
  .zoom-out-50 {
    --tw-exit-scale: 0.5;
  }
  .zoom-out-75 {
    --tw-exit-scale: 0.75;
  }
  .zoom-out-90 {
    --tw-exit-scale: 0.9;
  }
  .zoom-out-95 {
    --tw-exit-scale: 0.95;
  }
  .zoom-out-100 {
    --tw-exit-scale: 1;
  }
  .zoom-out-105 {
    --tw-exit-scale: 1.05;
  }
  .zoom-out-110 {
    --tw-exit-scale: 1.1;
  }
  .zoom-out-125 {
    --tw-exit-scale: 1.25;
  }
  .zoom-out-150 {
    --tw-exit-scale: 1.5;
  }

  /* Spin utilities */
  .spin-in {
    --tw-enter-rotate: 30deg;
  }
  .spin-in-0 {
    --tw-enter-rotate: 0deg;
  }
  .spin-in-1 {
    --tw-enter-rotate: 1deg;
  }
  .spin-in-2 {
    --tw-enter-rotate: 2deg;
  }
  .spin-in-3 {
    --tw-enter-rotate: 3deg;
  }
  .spin-in-6 {
    --tw-enter-rotate: 6deg;
  }
  .spin-in-12 {
    --tw-enter-rotate: 12deg;
  }
  .spin-in-45 {
    --tw-enter-rotate: 45deg;
  }
  .spin-in-90 {
    --tw-enter-rotate: 90deg;
  }
  .spin-in-180 {
    --tw-enter-rotate: 180deg;
  }

  .spin-out {
    --tw-exit-rotate: 30deg;
  }
  .spin-out-0 {
    --tw-exit-rotate: 0deg;
  }
  .spin-out-1 {
    --tw-exit-rotate: 1deg;
  }
  .spin-out-2 {
    --tw-exit-rotate: 2deg;
  }
  .spin-out-3 {
    --tw-exit-rotate: 3deg;
  }
  .spin-out-6 {
    --tw-exit-rotate: 6deg;
  }
  .spin-out-12 {
    --tw-exit-rotate: 12deg;
  }
  .spin-out-45 {
    --tw-exit-rotate: 45deg;
  }
  .spin-out-90 {
    --tw-exit-rotate: 90deg;
  }
  .spin-out-180 {
    --tw-exit-rotate: 180deg;
  }

  /* Slide utilities - using common Tailwind spacing values */
  .slide-in-from-top {
    --tw-enter-translate-y: -100%;
  }
  .slide-in-from-top-0 {
    --tw-enter-translate-y: 0;
  }
  .slide-in-from-top-1 {
    --tw-enter-translate-y: -0.25rem;
  }
  .slide-in-from-top-2 {
    --tw-enter-translate-y: -0.5rem;
  }
  .slide-in-from-top-3 {
    --tw-enter-translate-y: -0.75rem;
  }
  .slide-in-from-top-4 {
    --tw-enter-translate-y: -1rem;
  }
  .slide-in-from-top-5 {
    --tw-enter-translate-y: -1.25rem;
  }
  .slide-in-from-top-6 {
    --tw-enter-translate-y: -1.5rem;
  }
  .slide-in-from-top-8 {
    --tw-enter-translate-y: -2rem;
  }
  .slide-in-from-top-10 {
    --tw-enter-translate-y: -2.5rem;
  }
  .slide-in-from-top-12 {
    --tw-enter-translate-y: -3rem;
  }
  .slide-in-from-top-16 {
    --tw-enter-translate-y: -4rem;
  }
  .slide-in-from-top-20 {
    --tw-enter-translate-y: -5rem;
  }
  .slide-in-from-top-24 {
    --tw-enter-translate-y: -6rem;
  }
  .slide-in-from-top-full {
    --tw-enter-translate-y: -100%;
  }

  .slide-in-from-bottom {
    --tw-enter-translate-y: 100%;
  }
  .slide-in-from-bottom-0 {
    --tw-enter-translate-y: 0;
  }
  .slide-in-from-bottom-1 {
    --tw-enter-translate-y: 0.25rem;
  }
  .slide-in-from-bottom-2 {
    --tw-enter-translate-y: 0.5rem;
  }
  .slide-in-from-bottom-3 {
    --tw-enter-translate-y: 0.75rem;
  }
  .slide-in-from-bottom-4 {
    --tw-enter-translate-y: 1rem;
  }
  .slide-in-from-bottom-5 {
    --tw-enter-translate-y: 1.25rem;
  }
  .slide-in-from-bottom-6 {
    --tw-enter-translate-y: 1.5rem;
  }
  .slide-in-from-bottom-8 {
    --tw-enter-translate-y: 2rem;
  }
  .slide-in-from-bottom-10 {
    --tw-enter-translate-y: 2.5rem;
  }
  .slide-in-from-bottom-12 {
    --tw-enter-translate-y: 3rem;
  }
  .slide-in-from-bottom-16 {
    --tw-enter-translate-y: 4rem;
  }
  .slide-in-from-bottom-20 {
    --tw-enter-translate-y: 5rem;
  }
  .slide-in-from-bottom-24 {
    --tw-enter-translate-y: 6rem;
  }
  .slide-in-from-bottom-full {
    --tw-enter-translate-y: 100%;
  }

  .slide-in-from-left {
    --tw-enter-translate-x: -100%;
  }
  .slide-in-from-left-0 {
    --tw-enter-translate-x: 0;
  }
  .slide-in-from-left-1 {
    --tw-enter-translate-x: -0.25rem;
  }
  .slide-in-from-left-2 {
    --tw-enter-translate-x: -0.5rem;
  }
  .slide-in-from-left-3 {
    --tw-enter-translate-x: -0.75rem;
  }
  .slide-in-from-left-4 {
    --tw-enter-translate-x: -1rem;
  }
  .slide-in-from-left-5 {
    --tw-enter-translate-x: -1.25rem;
  }
  .slide-in-from-left-6 {
    --tw-enter-translate-x: -1.5rem;
  }
  .slide-in-from-left-8 {
    --tw-enter-translate-x: -2rem;
  }
  .slide-in-from-left-10 {
    --tw-enter-translate-x: -2.5rem;
  }
  .slide-in-from-left-12 {
    --tw-enter-translate-x: -3rem;
  }
  .slide-in-from-left-16 {
    --tw-enter-translate-x: -4rem;
  }
  .slide-in-from-left-20 {
    --tw-enter-translate-x: -5rem;
  }
  .slide-in-from-left-24 {
    --tw-enter-translate-x: -6rem;
  }
  .slide-in-from-left-full {
    --tw-enter-translate-x: -100%;
  }

  .slide-in-from-right {
    --tw-enter-translate-x: 100%;
  }
  .slide-in-from-right-0 {
    --tw-enter-translate-x: 0;
  }
  .slide-in-from-right-1 {
    --tw-enter-translate-x: 0.25rem;
  }
  .slide-in-from-right-2 {
    --tw-enter-translate-x: 0.5rem;
  }
  .slide-in-from-right-3 {
    --tw-enter-translate-x: 0.75rem;
  }
  .slide-in-from-right-4 {
    --tw-enter-translate-x: 1rem;
  }
  .slide-in-from-right-5 {
    --tw-enter-translate-x: 1.25rem;
  }
  .slide-in-from-right-6 {
    --tw-enter-translate-x: 1.5rem;
  }
  .slide-in-from-right-8 {
    --tw-enter-translate-x: 2rem;
  }
  .slide-in-from-right-10 {
    --tw-enter-translate-x: 2.5rem;
  }
  .slide-in-from-right-12 {
    --tw-enter-translate-x: 3rem;
  }
  .slide-in-from-right-16 {
    --tw-enter-translate-x: 4rem;
  }
  .slide-in-from-right-20 {
    --tw-enter-translate-x: 5rem;
  }
  .slide-in-from-right-24 {
    --tw-enter-translate-x: 6rem;
  }
  .slide-in-from-right-full {
    --tw-enter-translate-x: 100%;
  }

  /* Slide out utilities */
  .slide-out-to-top {
    --tw-exit-translate-y: -100%;
  }
  .slide-out-to-top-0 {
    --tw-exit-translate-y: 0;
  }
  .slide-out-to-top-1 {
    --tw-exit-translate-y: -0.25rem;
  }
  .slide-out-to-top-2 {
    --tw-exit-translate-y: -0.5rem;
  }
  .slide-out-to-top-3 {
    --tw-exit-translate-y: -0.75rem;
  }
  .slide-out-to-top-4 {
    --tw-exit-translate-y: -1rem;
  }
  .slide-out-to-top-5 {
    --tw-exit-translate-y: -1.25rem;
  }
  .slide-out-to-top-6 {
    --tw-exit-translate-y: -1.5rem;
  }
  .slide-out-to-top-8 {
    --tw-exit-translate-y: -2rem;
  }
  .slide-out-to-top-10 {
    --tw-exit-translate-y: -2.5rem;
  }
  .slide-out-to-top-12 {
    --tw-exit-translate-y: -3rem;
  }
  .slide-out-to-top-16 {
    --tw-exit-translate-y: -4rem;
  }
  .slide-out-to-top-20 {
    --tw-exit-translate-y: -5rem;
  }
  .slide-out-to-top-24 {
    --tw-exit-translate-y: -6rem;
  }
  .slide-out-to-top-full {
    --tw-exit-translate-y: -100%;
  }

  .slide-out-to-bottom {
    --tw-exit-translate-y: 100%;
  }
  .slide-out-to-bottom-0 {
    --tw-exit-translate-y: 0;
  }
  .slide-out-to-bottom-1 {
    --tw-exit-translate-y: 0.25rem;
  }
  .slide-out-to-bottom-2 {
    --tw-exit-translate-y: 0.5rem;
  }
  .slide-out-to-bottom-3 {
    --tw-exit-translate-y: 0.75rem;
  }
  .slide-out-to-bottom-4 {
    --tw-exit-translate-y: 1rem;
  }
  .slide-out-to-bottom-5 {
    --tw-exit-translate-y: 1.25rem;
  }
  .slide-out-to-bottom-6 {
    --tw-exit-translate-y: 1.5rem;
  }
  .slide-out-to-bottom-8 {
    --tw-exit-translate-y: 2rem;
  }
  .slide-out-to-bottom-10 {
    --tw-exit-translate-y: 2.5rem;
  }
  .slide-out-to-bottom-12 {
    --tw-exit-translate-y: 3rem;
  }
  .slide-out-to-bottom-16 {
    --tw-exit-translate-y: 4rem;
  }
  .slide-out-to-bottom-20 {
    --tw-exit-translate-y: 5rem;
  }
  .slide-out-to-bottom-24 {
    --tw-exit-translate-y: 6rem;
  }
  .slide-out-to-bottom-full {
    --tw-exit-translate-y: 100%;
  }

  .slide-out-to-left {
    --tw-exit-translate-x: -100%;
  }
  .slide-out-to-left-0 {
    --tw-exit-translate-x: 0;
  }
  .slide-out-to-left-1 {
    --tw-exit-translate-x: -0.25rem;
  }
  .slide-out-to-left-2 {
    --tw-exit-translate-x: -0.5rem;
  }
  .slide-out-to-left-3 {
    --tw-exit-translate-x: -0.75rem;
  }
  .slide-out-to-left-4 {
    --tw-exit-translate-x: -1rem;
  }
  .slide-out-to-left-5 {
    --tw-exit-translate-x: -1.25rem;
  }
  .slide-out-to-left-6 {
    --tw-exit-translate-x: -1.5rem;
  }
  .slide-out-to-left-8 {
    --tw-exit-translate-x: -2rem;
  }
  .slide-out-to-left-10 {
    --tw-exit-translate-x: -2.5rem;
  }
  .slide-out-to-left-12 {
    --tw-exit-translate-x: -3rem;
  }
  .slide-out-to-left-16 {
    --tw-exit-translate-x: -4rem;
  }
  .slide-out-to-left-20 {
    --tw-exit-translate-x: -5rem;
  }
  .slide-out-to-left-24 {
    --tw-exit-translate-x: -6rem;
  }
  .slide-out-to-left-full {
    --tw-exit-translate-x: -100%;
  }

  .slide-out-to-right {
    --tw-exit-translate-x: 100%;
  }
  .slide-out-to-right-0 {
    --tw-exit-translate-x: 0;
  }
  .slide-out-to-right-1 {
    --tw-exit-translate-x: 0.25rem;
  }
  .slide-out-to-right-2 {
    --tw-exit-translate-x: 0.5rem;
  }
  .slide-out-to-right-3 {
    --tw-exit-translate-x: 0.75rem;
  }
  .slide-out-to-right-4 {
    --tw-exit-translate-x: 1rem;
  }
  .slide-out-to-right-5 {
    --tw-exit-translate-x: 1.25rem;
  }
  .slide-out-to-right-6 {
    --tw-exit-translate-x: 1.5rem;
  }
  .slide-out-to-right-8 {
    --tw-exit-translate-x: 2rem;
  }
  .slide-out-to-right-10 {
    --tw-exit-translate-x: 2.5rem;
  }
  .slide-out-to-right-12 {
    --tw-exit-translate-x: 3rem;
  }
  .slide-out-to-right-16 {
    --tw-exit-translate-x: 4rem;
  }
  .slide-out-to-right-20 {
    --tw-exit-translate-x: 5rem;
  }
  .slide-out-to-right-24 {
    --tw-exit-translate-x: 6rem;
  }
  .slide-out-to-right-full {
    --tw-exit-translate-x: 100%;
  }

  /* Duration utilities */
  .duration-0 {
    animation-duration: 0ms;
  }
  .duration-75 {
    animation-duration: 75ms;
  }
  .duration-100 {
    animation-duration: 100ms;
  }
  .duration-150 {
    animation-duration: 150ms;
  }
  .duration-200 {
    animation-duration: 200ms;
  }
  .duration-300 {
    animation-duration: 300ms;
  }
  .duration-500 {
    animation-duration: 500ms;
  }
  .duration-700 {
    animation-duration: 700ms;
  }
  .duration-1000 {
    animation-duration: 1000ms;
  }

  /* Delay utilities */
  .delay-0 {
    animation-delay: 0ms;
  }
  .delay-75 {
    animation-delay: 75ms;
  }
  .delay-100 {
    animation-delay: 100ms;
  }
  .delay-150 {
    animation-delay: 150ms;
  }
  .delay-200 {
    animation-delay: 200ms;
  }
  .delay-300 {
    animation-delay: 300ms;
  }
  .delay-500 {
    animation-delay: 500ms;
  }
  .delay-700 {
    animation-delay: 700ms;
  }
  .delay-1000 {
    animation-delay: 1000ms;
  }

  /* Timing function utilities */
  .ease-linear {
    animation-timing-function: linear;
  }
  .ease-in {
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  .ease-out {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  .ease-in-out {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Animation play state */
  .running {
    animation-play-state: running;
  }
  .paused {
    animation-play-state: paused;
  }

  /* Fill mode utilities */
  .fill-mode-none {
    animation-fill-mode: none;
  }
  .fill-mode-forwards {
    animation-fill-mode: forwards;
  }
  .fill-mode-backwards {
    animation-fill-mode: backwards;
  }
  .fill-mode-both {
    animation-fill-mode: both;
  }

  /* Direction utilities */
  .direction-normal {
    animation-direction: normal;
  }
  .direction-reverse {
    animation-direction: reverse;
  }
  .direction-alternate {
    animation-direction: alternate;
  }
  .direction-alternate-reverse {
    animation-direction: alternate-reverse;
  }

  /* Repeat utilities */
  .repeat-0 {
    animation-iteration-count: 0;
  }
  .repeat-1 {
    animation-iteration-count: 1;
  }
  .repeat-infinite {
    animation-iteration-count: infinite;
  }
}
