@import "tailwindcss";
@tailwind utilities;
:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out both;
  }
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out both;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@tailwind utilities;

@layer components {
  .responsive-container {
    @apply px-2 sm:px-4 md:px-6 lg:px-8 py-4;
  }
  .responsive-heading {
    @apply text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 dark:text-white;
  }
  .responsive-subtext {
    @apply text-sm sm:text-base text-gray-600 dark:text-gray-300;
  }
  .responsive-modal {
    @apply w-full max-w-[90vw] sm:max-w-[600px] md:max-w-[800px] lg:max-w-[1000px] top-4;
  }
  .responsive-view-modal {
    @apply w-full max-w-[90vw] sm:max-w-[500px] top-4;
  }
}
/* hide scrollbars by default, show on hover for sidebar */
aside::-webkit-scrollbar {
  width: 8px;
}
aside::-webkit-scrollbar-track {
  background: transparent;
}
aside::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.4);
  border-radius: 10px;
  visibility: hidden;
}
aside:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}