/* Dark Mode Extensions for Forkware Processing */

/* Enable Tailwind dark mode */
:root {
  color-scheme: light dark;
}

/* Dark mode base styles */
html.dark {
  color-scheme: dark;
}

/* Form controls in dark mode */
.dark .filter-input {
  background-color: rgb(55, 65, 81);
  border-color: rgb(75, 85, 99);
  color: rgb(243, 244, 246);
}

.dark .filter-input::placeholder {
  color: rgb(156, 163, 175);
}

.dark .filter-input:focus {
  border-color: rgb(96, 165, 250);
  outline: 2px solid rgb(147, 197, 253);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.dark .filter-select {
  background-color: rgb(55, 65, 81);
  border-color: rgb(75, 85, 99);
  color: rgb(243, 244, 246);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke-width='1.5' stroke='%23d1d5db'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

.dark .filter-select:focus {
  border-color: rgb(96, 165, 250);
  outline: 2px solid rgb(147, 197, 253);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

.dark .tw-select {
  background-color: rgb(55, 65, 81);
  border-color: rgb(75, 85, 99);
  color: rgb(243, 244, 246);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke-width='1.5' stroke='%23d1d5db'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

.dark .tw-select:focus {
  border-color: rgb(96, 165, 250);
  outline: 2px solid rgb(147, 197, 253);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

/* Column toggle button */
.dark .column-toggle-btn {
  background-color: rgb(55, 65, 81);
  border-color: rgb(75, 85, 99);
  color: rgb(243, 244, 246);
}

.dark .column-toggle-btn:hover {
  background-color: rgb(75, 85, 99);
  border-color: rgb(107, 114, 128);
}

.dark .column-toggle-btn.active {
  background-color: rgb(59, 130, 246);
  border-color: rgb(59, 130, 246);
  color: white;
}

/* Table sticky columns in dark mode */
@media (min-width: 1024px) {
  .dark .sticky-left {
    background: rgb(31, 41, 55);
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.3);
  }
  .dark .sticky-right {
    background: rgb(31, 41, 55);
    box-shadow: -2px 0 4px -2px rgba(0,0,0,0.3);
  }
  .dark thead .sticky-left, 
  .dark thead .sticky-right { 
    background: rgb(55, 65, 81); 
  }
}

/* Mobile cards in dark mode */
.dark .project-card {
  background: rgb(31, 41, 55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.dark .project-card:active {
  transform: scale(0.98);
}

/* Skeleton loader in dark mode */
.dark .skeleton {
  background: linear-gradient(90deg, rgb(55, 65, 81) 25%, rgb(75, 85, 99) 50%, rgb(55, 65, 81) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Filter drawer in dark mode */
.dark .filter-drawer {
  background: rgb(31, 41, 55);
  box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.3);
}

/* Pull indicator in dark mode */
.dark .pull-indicator .bg-white {
  background-color: rgb(31, 41, 55) !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
}

/* Status pills in dark mode - enhance contrast */
.dark .bg-amber-50 {
  background-color: rgb(69, 26, 3) !important;
  color: rgb(245, 158, 11) !important;
}

.dark .bg-blue-50 {
  background-color: rgb(30, 58, 138) !important;
  color: rgb(147, 197, 253) !important;
}

.dark .bg-indigo-50 {
  background-color: rgb(49, 46, 129) !important;
  color: rgb(165, 180, 252) !important;
}

.dark .bg-emerald-50 {
  background-color: rgb(6, 95, 70) !important;
  color: rgb(110, 231, 183) !important;
}

.dark .bg-green-50 {
  background-color: rgb(6, 95, 70) !important;
  color: rgb(110, 231, 183) !important;
}

.dark .bg-rose-50 {
  background-color: rgb(159, 18, 57) !important;
  color: rgb(251, 113, 133) !important;
}

.dark .bg-slate-50 {
  background-color: rgb(51, 65, 85) !important;
  color: rgb(203, 213, 225) !important;
}

/* Ring colors for dark mode */
.dark .ring-amber-300 {
  --tw-ring-color: rgb(217, 119, 6) !important;
}

.dark .ring-blue-300 {
  --tw-ring-color: rgb(59, 130, 246) !important;
}

.dark .ring-indigo-300 {
  --tw-ring-color: rgb(129, 140, 248) !important;
}

.dark .ring-emerald-300 {
  --tw-ring-color: rgb(52, 211, 153) !important;
}

.dark .ring-green-300 {
  --tw-ring-color: rgb(52, 211, 153) !important;
}

.dark .ring-rose-300 {
  --tw-ring-color: rgb(244, 63, 94) !important;
}

.dark .ring-slate-300 {
  --tw-ring-color: rgb(148, 163, 184) !important;
}

/* Preset links in dark mode */
.dark .preset-links a {
  color: rgb(156, 163, 175);
}

.dark .preset-links a:hover {
  color: rgb(243, 244, 246);
}

/* Responsive adjustments for dark mode logos */
.dark img[alt*="Logo"] {
  filter: brightness(0.8) contrast(1.1);
}

/* Hover states in dark mode */
.dark tbody tr:hover {
  background-color: rgb(55, 65, 81) !important;
}

/* Focus states for better accessibility in dark mode */
.dark *:focus {
  outline-color: rgb(147, 197, 253);
}

/* Print styles override for dark mode */
@media print {
  .dark * {
    background-color: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .dark .bg-amber-50,
  .dark .bg-blue-50,
  .dark .bg-indigo-50,
  .dark .bg-emerald-50,
  .dark .bg-green-50,
  .dark .bg-rose-50,
  .dark .bg-slate-50 {
    background-color: #f9fafb !important;
    color: #374151 !important;
  }
}

/* Animation performance improvements */
.dark * {
  will-change: auto;
}

.dark .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}