style.css

/* Custom styles to enhance the Tailwind base */
#drop-zone {
    transition: all 0.3s ease;
}

#drop-zone.active {
    border-color: #4f46e5;
    background-color: rgba(79, 70, 229, 0.05);
}

.scale-btn {
    @apply px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors;
}

.scale-btn.active {
    @apply bg-indigo-600 text-white border-indigo-600 dark:bg-indigo-600 dark:border-indigo-600;
}

.commit-row {
    @apply px-4 py-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
}

.commit-row:hover {
    @apply bg-gray-50 dark:bg-gray-700;
}

.episode-item {
    @apply px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
}

.episode-item.active {
    @apply bg-indigo-50 dark:bg-gray-700 border-l-4 border-indigo-600;
}

.timeline-hover {
    fill: rgba(79, 70, 229, 0.1);
    stroke: #4f46e5;
}

.tooltip {
    @apply absolute bg-white dark:bg-gray-800 shadow-lg p-3 rounded-md border border-gray-200 dark:border-gray-700 text-sm pointer-events-none z-50;
    opacity: 0;
    transition: opacity 0.2s;
}

/* D3 timeline styles */
.axis path,
.axis line {
    fill: none;
    stroke: #9ca3af;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #6b7280;
    font-size: 0.8rem;
}

.axis-title {
    fill: #6b7280;
    font-size: 0.8rem;
}

.grid line {
    stroke: #e5e7eb;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.episode-rect {
    fill: #4f46e5;
    fill-opacity: 0.2;
    stroke: #4f46e5;
    stroke-width: 1.5;
}

.commit-circle {
    fill: #4f46e5;
    stroke: white;
    stroke-width: 1;
    opacity: 0.8;
}