/* Custom Styles for MoatFinder */

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

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

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

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

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

/* Buttons */
.btn-primary {
    @apply bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium;
}

.btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors font-medium;
}

.btn-danger {
    @apply bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium;
}

/* Form elements */
.filter-select {
    @apply px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
}

.filter-input {
    @apply px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
}

.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 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
}

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

/* View tabs */
.view-tab {
    @apply text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent transition-colors;
}

.view-tab.active {
    @apply text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400;
}

/* Drawer tabs */
.drawer-tab {
    @apply text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent transition-colors;
}

.drawer-tab.active {
    @apply text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400;
}

/* Status Pills */
.status-pill {
    @apply px-2 py-1 rounded-full text-xs font-medium;
}

.status-prospect { @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200; }
.status-contacted { @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200; }
.status-qualifying { @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200; }
.status-site-visit { @apply bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200; }
.status-negotiating { @apply bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200; }
.status-won { @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200; }
.status-lost { @apply bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-200; }

/* Priority badges */
.priority-high { @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200; }
.priority-med { @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200; }
.priority-low { @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200; }

/* Kanban columns */
.kanban-column {
    @apply bg-gray-100 dark:bg-gray-700 rounded-lg p-3 min-w-[280px] max-w-[320px];
}

.kanban-card {
    @apply bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm cursor-move hover:shadow-md transition-shadow;
}

.kanban-card.dragging {
    @apply opacity-50;
}

.kanban-column.drag-over {
    @apply bg-indigo-50 dark:bg-indigo-900/20;
}

/* Task items */
.task-item {
    @apply bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow;
}

.task-checkbox {
    @apply w-5 h-5 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500;
}

/* Toast notifications */
.toast {
    @apply px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 min-w-[250px] max-w-[400px];
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

.toast-info {
    @apply bg-blue-500 text-white;
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

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

.toast {
    animation: fadeIn 0.3s ease-out;
}

/* Responsive table */
@media (max-width: 768px) {
    table {
        font-size: 0.875rem;
    }
    
    th, td {
        padding: 0.5rem;
    }
}

/* Dark mode adjustments */
.dark .kpi-card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.dark input[type="file"]::-webkit-file-upload-button {
    @apply bg-gray-700 text-gray-200 border-gray-600;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f4f6;
    border-top: 2px solid #6366f1;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Interaction timeline */
.timeline-item {
    @apply relative pl-8 pb-4;
}

.timeline-item::before {
    content: '';
    @apply absolute left-2 top-2 w-2 h-2 bg-indigo-600 rounded-full;
}

.timeline-item::after {
    content: '';
    @apply absolute left-2.5 top-4 w-0.5 h-full bg-gray-300 dark:bg-gray-600;
}

.timeline-item:last-child::after {
    display: none;
}