/* Component-specific styles for Bonus Calculator Dashboard */

/* Modal Components */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-container {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden;
}

.modal-header {
    @apply flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700;
}

.modal-title {
    @apply text-lg font-medium text-gray-900 dark:text-white;
}

.modal-close {
    @apply p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.modal-body {
    @apply p-6 overflow-y-auto max-h-[calc(90vh-120px)];
}

.modal-footer {
    @apply flex items-center justify-end space-x-3 p-6 border-t border-gray-200 dark:border-gray-700;
}

/* Data Table Components */
.table-wrapper {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden;
}

.table-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.table-title {
    @apply text-lg font-medium text-gray-900 dark:text-white;
}

.table-actions {
    @apply flex items-center space-x-3;
}

.table-filters {
    @apply flex items-center space-x-4 mb-4;
}

.table-search {
    @apply flex-1 max-w-sm;
}

.table-search input {
    @apply w-full 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;
}

.table-filter-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;
}

/* KPI Card Components */
.kpi-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 card-hover;
}

.kpi-icon {
    @apply w-8 h-8 rounded-lg flex items-center justify-center;
}

.kpi-content {
    @apply ml-4;
}

.kpi-label {
    @apply text-sm font-medium text-gray-500 dark:text-gray-400;
}

.kpi-value {
    @apply text-2xl font-semibold text-gray-900 dark:text-white;
}

.kpi-change {
    @apply text-sm mt-1;
}

.kpi-change.positive {
    @apply text-green-600 dark:text-green-400;
}

.kpi-change.negative {
    @apply text-red-600 dark:text-red-400;
}

/* Chart Components */
.chart-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6;
}

.chart-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-4;
}

.chart-container {
    @apply relative w-full h-full;
}

.chart-loading {
    @apply flex items-center justify-center h-64;
}

.chart-error {
    @apply flex items-center justify-center h-64 text-red-600 dark:text-red-400;
}

/* Filter Components */
.filter-section {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-6;
}

.filter-title {
    @apply text-sm font-medium text-gray-700 dark:text-gray-300 mb-3;
}

.filter-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
}

.filter-item {
    @apply flex flex-col space-y-2;
}

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

.filter-input {
    @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;
}

.filter-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;
}

.filter-date {
    @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;
}

/* Button Components */
.btn-group {
    @apply flex items-center space-x-2;
}

.btn-icon {
    @apply p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.btn-small {
    @apply px-3 py-1 text-sm;
}

.btn-large {
    @apply px-6 py-3 text-lg;
}

.btn-loading {
    @apply opacity-75 cursor-not-allowed;
}

.btn-loading::after {
    content: '';
    @apply inline-block w-4 h-4 ml-2 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Status Components */
.status-indicator {
    @apply inline-flex items-center space-x-2;
}

.status-dot {
    @apply w-2 h-2 rounded-full;
}

.status-dot.active {
    @apply bg-green-500;
}

.status-dot.inactive {
    @apply bg-red-500;
}

.status-dot.pending {
    @apply bg-yellow-500;
}

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

.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;
}

/* Alert Components */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-success {
    @apply bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200;
}

.alert-error {
    @apply bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200;
}

.alert-warning {
    @apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200;
}

.alert-info {
    @apply bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200;
}

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

.loading-spinner.small {
    @apply w-4 h-4;
}

.loading-spinner.medium {
    @apply w-8 h-8;
}

.loading-spinner.large {
    @apply w-12 h-12;
}

.loading-text {
    @apply text-gray-600 dark:text-gray-300;
}

/* Tooltip Components */
.tooltip-container {
    @apply relative inline-block;
}

.tooltip-content {
    @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 whitespace-nowrap;
}

.tooltip-container:hover .tooltip-content {
    @apply opacity-100;
}

.tooltip-top {
    @apply bottom-full left-1/2 transform -translate-x-1/2 mb-2;
}

.tooltip-bottom {
    @apply top-full left-1/2 transform -translate-x-1/2 mt-2;
}

.tooltip-left {
    @apply right-full top-1/2 transform -translate-y-1/2 mr-2;
}

.tooltip-right {
    @apply left-full top-1/2 transform -translate-y-1/2 ml-2;
}

/* Pagination Components */
.pagination-container {
    @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-button {
    @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 transition-colors;
}

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

.pagination-button:first-child {
    @apply rounded-l-md;
}

.pagination-button:last-child {
    @apply rounded-r-md;
}

/* Form Components */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

.form-input {
    @apply w-full 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;
}

.form-textarea {
    @apply w-full 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 resize-vertical;
}

.form-select {
    @apply w-full 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;
}

.form-error {
    @apply mt-1 text-sm text-red-600 dark:text-red-400;
}

.form-help {
    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
}