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

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-pop-in {
    animation: popIn 0.2s ease-out forwards;
}

/* Priority badges */
.priority-badge {
    @apply px-2 py-1 rounded-full text-xs font-medium;
}

.priority-low {
    @apply bg-green-100 text-green-800;
}

.priority-medium {
    @apply bg-yellow-100 text-yellow-800;
}

.priority-high {
    @apply bg-red-100 text-red-800;
}

/* Table styling */
#goalsTable {
    @apply min-w-full divide-y divide-gray-200;
}

#goalsTable thead {
    @apply bg-gray-50;
}

#goalsTable th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

#goalsTable tbody {
    @apply bg-white divide-y divide-gray-200;
}

#goalsTable td {
    @apply px-6 py-4 whitespace-normal;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #goalsTable thead {
        @apply hidden;
    }
    
    #goalsTable tr {
        @apply block mb-4 bg-gray-50 rounded-lg;
    }
    
    #goalsTable td {
        @apply block px-4 py-2 text-sm;
    }
    
    #goalsTable td:before {
        content: attr(data-label);
        @apply font-medium text-gray-500 block mb-1;
    }
    
    #goalsTable td:last-child {
        @apply border-b-0;
    }
}

/* Button transitions */
button, input, select, textarea {
    @apply transition-colors duration-200;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    @apply w-2 h-2;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Focus styles */
input:focus, textarea:focus, select:focus {
    @apply ring-2 ring-indigo-500 border-indigo-500 outline-none;
}