/* Custom CSS for KPI Management System */

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 inline-flex items-center;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium px-4 py-2 rounded-lg transition-colors duration-200 inline-flex items-center border border-gray-300;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 inline-flex items-center;
}

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

/* Form Styles */
.form-input {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

.form-select {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 bg-white;
}

.form-textarea {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-vertical;
}

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

.card-header {
    @apply p-4 border-b border-gray-200;
}

.card-body {
    @apply p-4;
}

/* KPI Card Animations */
.kpi-card {
    @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg;
}

/* Table Styles */
.table-responsive {
    @apply overflow-x-auto;
}

.table {
    @apply w-full text-sm;
}

.table th {
    @apply bg-gray-50 p-3 text-left font-semibold text-gray-700;
}

.table td {
    @apply p-3 border-t border-gray-200;
}

.table-striped tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.table-hover tbody tr:hover {
    @apply bg-blue-50;
}

/* Status Indicators */
.status-high {
    @apply text-green-600 bg-green-100 px-2 py-1 rounded-full text-xs font-medium;
}

.status-medium {
    @apply text-yellow-600 bg-yellow-100 px-2 py-1 rounded-full text-xs font-medium;
}

.status-low {
    @apply text-red-600 bg-red-100 px-2 py-1 rounded-full text-xs font-medium;
}

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

.loading {
    @apply animate-spin;
}

/* Achievement Rate Colors */
.achievement-excellent {
    @apply text-green-600 font-bold;
}

.achievement-good {
    @apply text-blue-600 font-semibold;
}

.achievement-average {
    @apply text-yellow-600 font-medium;
}

.achievement-poor {
    @apply text-red-600 font-medium;
}

/* Responsive Grid */
@media (max-width: 768px) {
    .grid-responsive {
        @apply grid-cols-1;
    }
    
    .table-mobile {
        @apply text-xs;
    }
    
    .table-mobile th,
    .table-mobile td {
        @apply p-2;
    }
    
    /* Mobile Button Styles */
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger {
        @apply text-sm px-3 py-2;
    }
    
    /* Mobile Text Sizes */
    h1 {
        @apply text-lg;
    }
    
    h2 {
        @apply text-base;
    }
    
    h3 {
        @apply text-sm;
    }
    
    /* Reduce padding on mobile */
    .container {
        @apply px-2;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode .card {
        @apply bg-gray-800 border-gray-700;
    }
    
    .dark-mode .btn-secondary {
        @apply bg-gray-700 border-gray-600 text-gray-200 hover:bg-gray-600;
    }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-lg;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-lg;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}