src/app.css

@import "tailwindcss";

/* Base styles */
body {
  margin: 0;
  padding: 0;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #2e3438;
  background-color: #f6f9fc;
}

/* Storybook-specific styles */
.storybook-header {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Override link styles for Storybook design */
a {
  color: inherit;
  text-decoration: none;
}

/* Button reset for Storybook style */
button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
}

/* Input styles for controls */
input, select {
  font-family: inherit;
}

/* Storybook accent colors */
:root {
  --storybook-primary: #F87701;
  --storybook-secondary: #ff4785;
  --storybook-green: #37d67a;
  --storybook-orange: #fc521f;
  --storybook-yellow: #ffae00;
  --storybook-red: #fa5a5a;
  --storybook-gray-1: #f6f9fc;
  --storybook-gray-2: #e0e0e0;
  --storybook-gray-3: #999;
  --storybook-gray-4: #666;
  --storybook-gray-5: #333;
  --storybook-gray-6: #2b2b2b;
  --storybook-gray-7: #1a1a1a;
}

/* Gradio Dataframe CSS Variables */
:root {
  --gr-df-table-bg-even: #ffffff;
  --gr-df-table-bg-odd: #f9fafb;
  --gr-df-copied-cell-color: #dbeafe;
  --gr-df-table-border: #e5e7eb;
  --gr-df-table-text: #374151;
  --gr-df-accent: #3b82f6;
  --gr-df-accent-soft: #dbeafe;
  --gr-df-font-size: 14px;
  --gr-df-font-mono: ui-monospace, SFMono-Regular, monospace;
  --gr-df-font-sans: system-ui, -apple-system, sans-serif;
  --gr-df-table-radius: 8px;
}


/* Custom theme examples */
.purple-theme {
  --gr-df-accent: #7c3aed;
  --gr-df-accent-soft: #ede9fe;
  --gr-df-copied-cell-color: #ede9fe;
}

.green-theme {
  --gr-df-accent: #059669;
  --gr-df-accent-soft: #d1fae5;
  --gr-df-copied-cell-color: #d1fae5;
}

.orange-theme {
  --gr-df-accent: #ea580c;
  --gr-df-accent-soft: #fed7aa;
  --gr-df-copied-cell-color: #fed7aa;
}

/* Dark Mode Theme */
.dark {
  /* Override root CSS variables for dark mode */
  --gr-df-table-bg-even: #1f2937;
  --gr-df-table-bg-odd: #111827;
  --gr-df-copied-cell-color: #374151;
  --gr-df-table-border: #374151;
  --gr-df-table-text: #f9fafb;
  --gr-df-accent: #60a5fa;
  --gr-df-accent-soft: #1e3a8a;
  
  /* Dark mode for body and base elements */
  background-color: #0f172a;
  color: #f1f5f9;
}

/* Dark mode specific overrides for the interface */
.dark .bg-white {
  background-color: #1e293b;
}

.dark .bg-\[#f6f9fc\] {
  background-color: #0f172a;
}

.dark .bg-\[#f8fafc\] {
  background-color: #1e293b;
}

/* Dark mode for dataframe container background */
.dark div[class*="bg-[#f8fafc]"] {
  background-color: #1e293b;
}

.dark .rounded-lg.bg-\[#f8fafc\] {
  background-color: #1e293b;
}

.dark .rounded-xl.bg-\[#f8fafc\] {
  background-color: #1e293b;
}

/* Comprehensive dark mode overrides for all light backgrounds */
.dark div,
.dark section,
.dark main,
.dark header,
.dark footer,
.dark aside,
.dark nav {
  /* Override common light background colors */
}

.dark [class*="bg-white"]:not(button):not(.btn):not([role="button"]) {
  background-color: #1e293b;
}

.dark [class*="bg-[#f6f9fc]"]:not(button):not(.btn):not([role="button"]) {
  background-color: #0f172a;
}

.dark [class*="bg-[#f8fafc]"]:not(button):not(.btn):not([role="button"]) {
  background-color: #1e293b;
}

.dark [class*="bg-[#f9fafb]"]:not(button):not(.btn):not([role="button"]) {
  background-color: #1e293b;
}

.dark [class*="bg-[#fafafa]"]:not(button):not(.btn):not([role="button"]) {
  background-color: #1e293b;
}

.dark [class*="bg-gray-50"]:not(button):not(.btn):not([role="button"]) {
  background-color: #1e293b;
}

.dark [class*="bg-gray-100"]:not(button):not(.btn):not([role="button"]) {
  background-color: #334155;
}

/* Dark mode for all text colors */
.dark [class*="text-[#2e3438]"] {
  color: #f1f5f9;
}

.dark [class*="text-[#374151]"] {
  color: #e2e8f0 ;
}

.dark [class*="text-[#64748b]"] {
  color: #94a3b8 ;
}

.dark [class*="text-[#9ca3af]"] {
  color: #6b7280 ;
}

.dark [class*="text-[#6b7280]"] {
  color: #9ca3af ;
}

/* Dark mode for all border colors */
.dark [class*="border-[#e0e0e0]"] {
  border-color: #475569;
}

.dark [class*="border-[#e5e7eb]"] {
  border-color: #475569;
}

.dark [class*="border-[#d1d5db]"] {
  border-color: #475569;
}

.dark [class*="border-[#e2e8f0]"] {
  border-color: #475569;
}

.dark .border-\[#d1d5db\] {
  border-color: #475569;
}

.dark .border-\[#e0e0e0\] {
  border-color: #475569;
}

.dark .border-\[#e2e8f0\] {
  border-color: #475569;
}

.dark .text-\[#2e3438\] {
  color: #f1f5f9;
}

.dark .text-\[#73828c\] {
  color: #cbd5e1;
}

.dark .text-\[#64748b\] {
  color: #94a3b8 ;
}

.dark .text-\[#374151\] {
  color: #e2e8f0 ;
}

.dark .text-\[#1e293b\] {
  color: #f8fafc ;
}

.dark .text-\[#9ca3af\] {
  color: #6b7280 ;
}

/* Dark mode hover states */
.dark .hover\:bg-\[#f6f9fc\]:hover {
  background-color: #334155;
}

.dark .hover\:text-\[#2e3438\]:hover {
  color: #f1f5f9;
}

.dark .hover\:border-\[#cbd5e1\]:hover {
  border-color: #64748b ;
}

/* Dark mode focus states */
.dark .focus\:ring-\[#F87701\]:focus {
  --tw-ring-color: #f97316 ;
}

.dark .focus\:border-\[#F87701\]:focus {
  border-color: #f97316 ;
}

/* Dark mode for example cards */
.dark .bg-\[#f1f5f9\] {
  background-color: #475569;
}

.dark .bg-\[#fef7f0\] {
  background-color: #1e3a8a ;
}

.dark .border-\[#F87701\] {
  border-color: #60a5fa ;
}

/* Dark mode for selected example card backgrounds - more specific selectors */
.dark .rounded-xl.border-2.bg-\[#fef7f0\] {
  background-color: #1e3a8a ;
  border-color: #60a5fa ;
}

.dark .rounded-xl.border-2.border-\[#F87701\] {
  background-color: #1e3a8a ;
  border-color: #60a5fa ;
}

/* Dark mode for example card selected state colors */
.dark .bg-\[#F87701\] {
  background-color: #60a5fa ;
}

/* Force dark mode on selected example cards using attribute selectors */
.dark div[class*="bg-[#fef7f0]"] {
  background-color: #1e3a8a ;
}

.dark div[class*="border-[#F87701]"] {
  border-color: #60a5fa ;
}

.dark div[class*="bg-[#F87701]"] {
  background-color: #60a5fa ;
}

/* Maximum specificity override for selected example cards in dark mode */
html.dark body div.space-y-2 button div.rounded-xl {
  background-color: #1e3a8a ;
  border-color: #60a5fa ;
}

/* Target any div with the specific orange background class in dark mode */
html.dark [class~="bg-[#fef7f0]"] {
  background-color: #1e3a8a ;
}

html.dark [class~="border-[#F87701]"] {
  border-color: #60a5fa ;
}

/* Nuclear option - override any element with these exact classes */
.dark * {
  --selected-bg: #1e3a8a;
  --selected-border: #60a5fa;
}

.dark .bg-\[#fef7f0\],
.dark [style*="background"],
.dark .rounded-xl[class*="bg-[#fef7f0]"] {
  background-color: var(--selected-bg) ;
  background: var(--selected-bg) ;
}

.dark .border-\[#F87701\],
.dark .rounded-xl[class*="border-[#F87701]"] {
  border-color: var(--selected-border) ;
}

/* Dark mode for select dropdown */
.dark select {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #475569;
}

.dark select option {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* Dark mode for gradients */
.dark .bg-gradient-to-r {
  background: linear-gradient(to right, #1e293b, #0f172a) ;
}

/* Dark mode for shadows */
.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) ;
}

.dark .hover\:shadow-sm:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) ;
}

/* Dark mode for code blocks and syntax highlighting */
.dark code {
  background-color: #374151 ;
  color: #f9fafb ;
}

.dark pre {
  background-color: #1f2937 ;
  border-color: #475569;
}

/* Dark mode for tables */
.dark table {
  background-color: #1e293b;
}

.dark th, .dark td {
  border-color: #475569;
  color: #f1f5f9;
}

.dark thead {
  background-color: #374151 ;
}

.dark tbody tr:hover {
  background-color: #334155;
}

/* Dark mode for mobile overlay */
.dark .bg-black {
  background-color: rgba(0, 0, 0, 0.8) ;
}

/* Additional dark mode text color fixes */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #f1f5f9;
}

.dark p {
  color: #cbd5e1;
}

.dark label {
  color: #f1f5f9;
}

/* Dark mode for specific text color classes that might be missed */
.dark .text-gray-600 {
  color: #94a3b8 ;
}

.dark .text-gray-700 {
  color: #cbd5e1;
}

.dark .text-gray-800 {
  color: #e2e8f0 ;
}

.dark .text-gray-900 {
  color: #f1f5f9;
}

/* Dark mode for any remaining light backgrounds */
.dark .bg-gray-50 {
  background-color: #1e293b;
}

.dark .bg-gray-100 {
  background-color: #334155;
}

.dark .bg-gray-200 {
  background-color: #475569;
}

/* Dark mode for input placeholders */
.dark input::placeholder {
  color: #94a3b8 ;
}

.dark textarea::placeholder {
  color: #94a3b8 ;
}

/* Dark mode for any white text that should be dark in light mode but light in dark mode */
.dark .text-white {
  color: #f1f5f9;
}

/* Ensure dataframe component inherits dark theme properly */
.dark [data-testid="dataframe"] {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* Dark mode for any remaining border colors */
.dark .border-gray-200 {
  border-color: #475569;
}

.dark .border-gray-300 {
  border-color: #64748b ;
}

/* Dark mode for button text that might not be covered */
.dark button {
  color: inherit ;
}

/* Dark mode for links */
.dark a {
  color: #60a5fa ;
}

.dark a:hover {
  color: #93c5fd ;
}

/* Force dark mode on all text elements that might be using default colors */
.dark * {
  border-color: #475569;
}

/* Specific overrides for components that might not inherit properly */
.dark .text-current {
  color: #f1f5f9;
}

/* Dark mode for any remaining light text colors */
.dark .text-black {
  color: #f1f5f9;
}

/* Dark mode for the dataframe component wrapper */
.dark div[class*="dataframe"] {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* Dark mode for any input elements */
.dark input {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #475569;
}

/* Dark mode for checkboxes and form controls */
.dark input[type="checkbox"] {
  background-color: #374151 ;
  border-color: #6b7280 ;
}

.dark input[type="checkbox"]:checked {
  background-color: #60a5fa ;
  border-color: #60a5fa ;
}

/* Page titles */
.page-title {
  @apply text-lg md:text-xl lg:text-2xl font-bold text-[#2e3438] mb-3 md:mb-4 tracking-tight;
}

/* Section titles */
.section-title {
  @apply text-lg font-bold text-[#2e3438] mb-4;
}

/* Subsection titles */
.subsection-title {
  @apply text-base font-bold text-[#2e3438] mb-2;
}

/* Content cards */
.content-card {
  @apply bg-white rounded-xl md:rounded-2xl shadow-lg border border-[#e0e0e0] p-4 sm:p-6 md:p-6 lg:p-8 xl:p-12;
}

/* Navigation buttons */
.nav-button {
  @apply flex items-center py-1 px-2 text-xs mb-1 font-medium transition-all duration-200 rounded-sm;
}

.nav-button-active {
  @apply border-[#F87701] bg-[#fef7f0];
}

.nav-button-inactive {
  @apply text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc];
}

.example-card {
  @apply flex items-center py-1 px-2 text-xs font-medium transition-all duration-200 rounded-sm;
}

/* Example card containers */
.example-card-active {
  @apply border-[#F87701] bg-[#fef7f0];
}

.example-card-inactive {
  @apply border-[#e2e8f0] bg-white;
}

/* Example card icons */
.example-icon {
  @apply w-6 h-6 rounded-lg flex items-center justify-center mr-2 transition-colors duration-200;
}

.example-icon-active {
  @apply bg-[#F87701] text-white;
}

.example-icon-inactive {
  @apply bg-[#f1f5f9] text-[#64748b];
}

/* Text styles */
.description-text {
  @apply text-sm md:text-base lg:text-lg text-[#73828c] leading-relaxed font-medium;
}

.feature-text {
  @apply text-sm text-[#64748b] leading-relaxed font-medium;
}

/* Event sections */
.event-section {
  @apply border border-[#e2e8f0] rounded-xl p-8 bg-gradient-to-r from-[#f8fafc] to-white;
}

/* Main layout containers */
.main-container {
  @apply max-w-full md:max-w-3xl lg:max-w-5xl xl:max-w-6xl mx-auto ;
}

.page-wrapper {
  @apply flex-1 bg-[#f6f9fc] p-4 sm:p-6 md:p-6 lg:p-8 xl:p-12 overflow-auto;
}

/* Dark mode overrides for new classes */
.dark .page-title,
.dark .section-title,
.dark .subsection-title {
  color: #f1f5f9;
}

.dark .content-card {
  background-color: #1e293b;
  border-color: #475569;
}

.dark .nav-button-active {
  background-color: #1e3a8a;
}

.dark .nav-button-inactive {
  color: #cbd5e1;
}

.dark .nav-button-inactive:hover {
  color: #f1f5f9;
  background-color: #334155;
}

.dark .example-card-active {
  background-color: #1e3a8a;
}

.dark .example-card-inactive {
  background-color: #1e293b ;
}

.dark .example-card-inactive:hover {
  background-color: #334155;
}

.dark .example-icon-active {
  background-color: #60a5fa;
}

.dark .description-text,
.dark .feature-text {
  color: #cbd5e1;
}

.dark .event-section {
  background: linear-gradient(to right, #1e293b, #0f172a);
  border-color: #475569;
}

div[role*="slider"] {
  border-top: 1px solid #d1d5db;
}
/* Resizable controls panel styling */
.drag-handle {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.drag-handle:hover {
  background-color: #f9fafb;
}

.drag-handle.dragging {
  background-color: #f3f4f6;
  cursor: ns-resize;
}

/* Dark mode for drag handle */
.dark .drag-handle:hover {
  background-color: #374151;
}

.dark .drag-handle.dragging {
  background-color: #4b5563;
}

/* Prevent text selection during drag */
body.dragging {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: ns-resize;
}