/* Main CSS for Bonus Calculator Dashboard */

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

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

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

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

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom button styles */
.btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.btn-success {
    @apply px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
}

.btn-danger {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

/* Modern Table styles */
.modern-table {
    @apply w-full border-collapse;
}

.modern-table th {
    @apply px-6 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700;
}

.modern-table td {
    @apply px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-800;
}

.modern-table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200;
}

.modern-table tbody tr:last-child td {
    @apply border-b-0;
}

/* Legacy table styles for backward compatibility */
.data-table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.data-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider;
}

.data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white;
}

.data-table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150;
}

/* Modern Badge styles */
.modern-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors;
}

.badge-primary {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300;
}

.badge-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
}

.badge-danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300;
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-active {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
}

.status-inactive {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
}

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

/* Modal animations */
.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

.modal-exit {
    animation: modalExit 0.3s ease-in;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalExit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* Chart container styles */
.chart-container {
    @apply relative w-full h-full;
}

.chart-container canvas {
    @apply max-h-full;
}

/* Chart wrapper styles */
.chart-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-wrapper canvas {
    max-height: 100% !important;
    max-width: 100% !important;
}

/* Filter styles */
.filter-group {
    @apply flex flex-col space-y-2;
}

.filter-group label {
    @apply text-sm font-medium text-gray-700 dark:text-gray-300;
}

.filter-group input,
.filter-group select {
    @apply px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Pagination styles */
.pagination {
    @apply flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
}

.pagination-info {
    @apply text-sm text-gray-700 dark:text-gray-300;
}

.pagination-controls {
    @apply flex items-center space-x-2;
}

.pagination-btn {
    @apply px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed;
}

.pagination-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

/* Tooltip styles */
.tooltip {
    @apply absolute z-10 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .table-responsive {
        @apply overflow-x-auto;
    }
    
    .table-responsive table {
        @apply min-w-full;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}