/*
 * Application Styles
 * Basic component styles and utilities
 */

@layer base {
  html {
    @apply h-full;
  }
  
  body {
    @apply h-full font-sans text-gray-900 bg-gray-50 antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-gray-900;
  }

  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-2xl;
  }

  h4 {
    @apply text-xl;
  }

  h5 {
    @apply text-lg;
  }

  h6 {
    @apply text-base;
  }

  a {
    @apply text-blue-600 hover:text-blue-700;
  }

   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="number"],
   input[type="date"],
   input[type="tel"],
   textarea,
   select {
     @apply w-full px-3 py-2 border border-gray-300 rounded-none;
     @apply bg-white text-gray-900;
     @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
   }

   button,
   input[type="submit"],
   input[type="button"] {
     @apply px-4 py-2 rounded-none font-medium cursor-pointer;
   }

  table {
    @apply w-full border-collapse;
  }

  th {
    @apply bg-gray-100 text-gray-800 font-semibold text-left px-4 py-2;
    @apply border-b-2 border-gray-300;
  }

  td {
    @apply px-4 py-2 border-b border-gray-200;
  }

  tr:hover {
    @apply bg-gray-50;
  }
}

@layer components {
  /* Custom select dropdown styling */
  .custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.5rem !important;
  }

  /* Category button blink animation */
  @keyframes category-blink {
    0%, 20%, 40%, 60%, 80%, 100% {
      background-color: black;
      color: white;
    }
    10%, 30%, 50%, 70%, 90% {
      background-color: white;
      color: rgb(156 163 175); /* gray-400 */
    }
  }
  
  .animate-category-blink {
    animation: category-blink 1s ease-in-out;
  }

  /* Total value blink animations - green for positive changes */
  @keyframes total-blink-green {
    0%, 20%, 40%, 60%, 80%, 100% {
      border-color: rgb(22 163 74); /* green-600 */
      color: rgb(22 163 74);
    }
    10%, 30%, 50%, 70%, 90% {
      border-color: rgb(187 247 208); /* green-100 */
      color: rgb(187 247 208);
    }
  }

  .animate-total-blink-green {
    animation: total-blink-green 1s ease-in-out;
  }

  /* Total value blink animations - red for negative changes */
  @keyframes total-blink-red {
    0%, 20%, 40%, 60%, 80%, 100% {
      border-color: rgb(220 38 38); /* red-600 */
      color: rgb(220 38 38);
    }
    10%, 30%, 50%, 70%, 90% {
      border-color: rgb(254 205 211); /* red-100 */
      color: rgb(254 205 211);
    }
  }

  .animate-total-blink-red {
    animation: total-blink-red 1s ease-in-out;
  }

  /* Card component */
  .card {
    @apply bg-white rounded-lg border border-gray-200 p-6;
  }

  /* Button variants */
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
  }

  .btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white;
  }

  .btn-outline {
    @apply bg-transparent hover:bg-gray-50;
    @apply border border-gray-300 hover:border-gray-400;
    @apply text-gray-700 hover:text-gray-900;
  }
}