@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
}
@layer components {
  .btn-primary {
    @apply bg-primary-600 active:scale-95 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 dark:bg-primary-500 dark:hover:bg-primary-600;
  }

  .btn-secondary {
    @apply bg-gray-200 active:scale-95 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200;
  }

  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6 dark:bg-gray-800 dark:shadow-gray-900/30;
  }

  .sidebar-link {
    @apply flex items-center px-6 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 transition duration-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-primary-400;
  }

  .sidebar-link-active {
    @apply bg-primary-50 text-primary-600 border-r-4 border-primary-600 dark:bg-gray-700 dark:text-primary-400 dark:border-primary-500;
  }

  .video-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem;
  }

  .video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scroll-smooth {
    scroll-behavior: smooth;
  }

  /* Lazy loading blur effect */
  img.lazy {
    filter: blur(5px);
    transition: filter 0.3s;
  }

  img.lazy.loaded {
    filter: blur(0);
  }

  /* Performance optimization */
  .aspect-\[9\/16\] {
    aspect-ratio: 9 / 16;
  }

  /* Prevent layout shift */
  img[loading="lazy"] {
    min-height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Dark mode skeleton */
  .dark img[loading="lazy"] {
    background: linear-gradient(90deg, #1f2937 25%, #111827 50%, #1f2937 75%);
    background-size: 200% 100%;
  }
}
@layer base {
  ::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
  }

  ::-webkit-scrollbar-button {
    display: none;
    width: 0px;
    background: transparent;
  }

  ::-moz-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
  }
}