css/styles.css

/**
 * Custom styles for OCR Text Explorer
 * Extends Tailwind CSS with specific styling needs
 */

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

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.400') theme('colors.gray.100');
}

.dark * {
    scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
}

/* Smooth transitions for theme switching */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Image panel sticky positioning adjustment */
.sticky {
    position: -webkit-sticky;
    position: sticky;
}

/* Diff content styling */
.diff-content {
    line-height: 1.6;
    word-break: break-word;
}

/* Reasoning trace styling */
.reasoning-panel {
    @apply bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20;
    @apply border-l-4 border-blue-500 dark:border-blue-400;
}

.reasoning-step {
    @apply transition-all hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md p-2 -m-2;
}

.reasoning-step-number {
    @apply inline-flex items-center justify-center w-7 h-7;
    @apply bg-gradient-to-br from-blue-500 to-indigo-600;
    @apply text-white text-xs font-bold rounded-full;
    @apply shadow-sm;
}

.reasoning-step-title {
    @apply font-semibold text-gray-900 dark:text-gray-100;
    @apply border-b border-gray-200 dark:border-gray-700 pb-1 mb-2;
}

.reasoning-step-content {
    @apply text-sm text-gray-700 dark:text-gray-300;
    @apply leading-relaxed;
}

/* Collapse animation for reasoning panel */
[x-collapse] {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

[x-collapse].collapsed {
    max-height: 0;
}

/* Reasoning trace indicators */
.reasoning-indicator {
    @apply animate-pulse;
}

.reasoning-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
    @apply bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900 dark:to-indigo-900;
    @apply text-blue-800 dark:text-blue-200;
    @apply border border-blue-200 dark:border-blue-700;
}

/* Keyboard hint styling */
kbd {
    @apply inline-block px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Loading spinner animation (in case Tailwind's animate-spin needs adjustment) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Tab hover effect */
nav button {
    position: relative;
    transition: color 0.2s ease;
}

nav button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

nav button:hover::after {
    @apply bg-gray-300 dark:bg-gray-600;
}

/* Image loading state */
img {
    @apply bg-gray-200 dark:bg-gray-700;
    min-height: 200px;
}

img[src=""] {
    visibility: hidden;
}

/* Print styles */
@media print {
    header, footer {
        display: none !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    main {
        height: auto !important;
    }
    
    .diff-content {
        page-break-inside: avoid;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Stack panels vertically on mobile */
    main.flex {
        @apply flex-col;
    }
    
    /* Full width for panels on mobile */
    main > div:first-child {
        @apply w-full max-h-96;
    }
    
    /* Adjust text size */
    .prose-sm {
        @apply text-xs;
    }
    
    /* Hide keyboard hints on mobile */
    footer .text-sm:last-child {
        @apply hidden;
    }
}

/* Focus styles for accessibility */
button:focus, input:focus, select:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900;
}

/* Custom tooltip styles (if needed later) */
.tooltip {
    @apply invisible absolute z-10 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg dark:bg-gray-700;
}

.tooltip-trigger:hover .tooltip {
    @apply visible;
}

/* Preserve whitespace in diff views */
.whitespace-pre-wrap {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Enhanced diff highlighting with better dark mode contrast */
.diff-delete {
    @apply bg-red-200 dark:bg-red-950 text-red-800 dark:text-red-300;
    text-decoration: line-through;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

.diff-insert {
    @apply bg-green-200 dark:bg-green-950 text-green-800 dark:text-green-300;
    position: relative;
}

/* Dark mode specific improvements */
.dark .prose {
    @apply text-gray-200;
}

.dark .prose h3 {
    @apply text-gray-100;
}

/* Remove this - handled inline with classes
.dark pre {
    @apply bg-gray-800 text-gray-200;
} */

/* Line numbers for future enhancement */
.line-numbers {
    counter-reset: line;
}

.line-numbers > div::before {
    counter-increment: line;
    content: counter(line);
    @apply inline-block w-12 mr-4 text-right text-gray-400 dark:text-gray-600 select-none;
}

/* Markdown content styling */
.markdown-content {
    @apply text-gray-900 dark:text-gray-100;
}

.markdown-content h1 {
    @apply text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100;
}

.markdown-content h2 {
    @apply text-xl font-bold mb-3 text-gray-900 dark:text-gray-100;
}

.markdown-content h3 {
    @apply text-lg font-bold mb-2 text-gray-900 dark:text-gray-100;
}

.markdown-content h4 {
    @apply text-base font-bold mb-2 text-gray-900 dark:text-gray-100;
}

.markdown-content p {
    @apply mb-4 leading-relaxed;
}

.markdown-content ul {
    @apply list-disc list-inside mb-4 pl-4;
}

.markdown-content ol {
    @apply list-decimal list-inside mb-4 pl-4;
}

.markdown-content li {
    @apply mb-1;
}

.markdown-content blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 my-4 italic text-gray-700 dark:text-gray-300;
}

.markdown-content code {
    @apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono;
}

.markdown-content pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
}

.markdown-content pre code {
    @apply bg-transparent p-0;
}

.markdown-content a {
    @apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300;
}

.markdown-content table {
    @apply w-full mb-4 border-collapse;
    display: table !important;
}

.markdown-content th, .markdown-content td {
    @apply border border-gray-300 dark:border-gray-600 px-3 py-2;
}

.markdown-content th {
    @apply bg-gray-100 dark:bg-gray-800 font-bold;
}

/* Override prose styles for tables */
.prose table {
    @apply w-full mb-4 border-collapse;
    display: table !important;
}

.prose thead {
    @apply bg-gray-50 dark:bg-gray-800;
}

.prose tbody {
    @apply bg-white dark:bg-gray-900;
}

.prose th {
    @apply px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600;
}

.prose td {
    @apply px-3 py-4 text-sm text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600;
}

.markdown-content hr {
    @apply border-t border-gray-300 dark:border-gray-600 my-6;
}