@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom color palette for IVS */
@layer components {
  :root {
    --color-ivs-blue: #1e3a8a;
    --color-ivs-light-blue: #3b82f6;
    --color-ivs-green: #10b981;
    --color-ivs-purple: #8b5cf6;
    --color-ivs-orange: #f59e0b;
    --color-ivs-red: #ef4444;
    --color-ivs-dark: #1f2937;
    --color-ivs-light: #f3f4f6;
    --color-ivs-border: #e5e7eb;
    --color-ivs-card: #ffffff;
  }

  .bg-ivs-blue { @apply bg-blue-900; }
  .bg-ivs-light-blue { @apply bg-blue-500; }
  .bg-ivs-green { @apply bg-green-500; }
  .bg-ivs-purple { @apply bg-purple-500; }
  .bg-ivs-orange { @apply bg-amber-500; }
  .bg-ivs-red { @apply bg-red-500; }
  .bg-ivs-dark { @apply bg-gray-900; }
  .bg-ivs-light { @apply bg-gray-100; }
  .bg-ivs-border { @apply bg-gray-200; }
  .bg-ivs-card { @apply bg-white dark:bg-gray-800; }

  .text-ivs-blue { @apply text-blue-900; }
  .text-ivs-light-blue { @apply text-blue-500; }
  .text-ivs-green { @apply text-green-500; }
  .text-ivs-purple { @apply text-purple-500; }
  .text-ivs-orange { @apply text-amber-500; }

  .border-ivs-blue { @apply border-blue-900; }
  .border-ivs-light-blue { @apply border-blue-500; }
  .border-ivs-green { @apply border-green-500; }
  .border-ivs-purple { @apply border-purple-500; }
  .border-ivs-orange { @apply border-amber-500; }
  .border-ivs-border { @apply border-gray-200; }

  /* Card component */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-6 transition-all duration-200;
  }

  .card:hover {
    @apply shadow-lg border-blue-500;
  }

  /* Button components */
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg font-semibold hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors;
  }

  .btn-success {
    @apply px-4 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors;
  }

  .btn-danger {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition-colors;
  }

  /* Input components */
  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors;
  }

  /* Navigation */
  .nav-item {
    @apply flex items-center gap-3 px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer;
  }

  .nav-item.active {
    @apply bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }

  body {
    @apply bg-gray-900 text-white;
  }
}

/* Utility classes */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

.transition-all {
  @apply transition-all duration-200 ease-in-out;
}