/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./app/javascript/styles/application.css ***!
  \*********************************************************************************************************************/
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Loading animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

/* Form focus styles */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* Button hover effects */
.btn-primary {
  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

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

/* Card styles */
.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.card-hover {
  @apply hover:shadow-lg transition-shadow duration-200;
}

/* Status badges */
.badge-success {
  @apply bg-green-100 text-green-800 px-2 py-1 text-xs font-semibold rounded-full;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800 px-2 py-1 text-xs font-semibold rounded-full;
}

.badge-error {
  @apply bg-red-100 text-red-800 px-2 py-1 text-xs font-semibold rounded-full;
}

.badge-info {
  @apply bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold rounded-full;
} 

/**/