:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

html.dark body {
    background: radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.08), transparent 35%),
                radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.08), transparent 40%),
                #0b1220;
    color: #e5e7eb;
}

html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: #0f172a !important;
}

html.dark .bg-gradient-to-br,
html.dark .bg-gradient-to-r {
    background-color: #0f172a !important;
    background-image: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(59, 130, 246, 0.08)) !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
    color: #e5e7eb !important;
}

html.dark .text-gray-600 {
  color: #cbd5e1 !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #94a3b8 !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-gray-400 {
  border-color: #1f2937 !important;
}

html.dark .shadow-lg,
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35) !important;
}

html.dark .btn-primary,
html.dark .btn-secondary,
html.dark .btn-danger {
    color: #f8fafc;
}

html.dark input,
html.dark textarea,
html.dark select,
html.dark option,
html.dark .upload-area,
html.dark .card,
html.dark .toast,
html.dark .progress-bar,
html.dark .progress-bar-fill {
  background-color: #0b1220;
  color: #e5e7eb;
  border-color: #1f2937;
}

html.dark .upload-area:hover {
  border-color: #4f46e5;
  background-color: rgba(79, 70, 229, 0.06);
}

html.dark .toast.success {
  border-left-color: #22c55e;
}

html.dark .toast.error {
  border-left-color: #ef4444;
}

html.dark .toast.info {
  border-left-color: #3b82f6;
}

html.dark .toast.warning {
  border-left-color: #f59e0b;
}

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

html.dark table th,
html.dark table td {
  border-color: #1f2937;
}

html.dark table th {
  background-color: #0b1220;
}

html.dark .status-completed {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

html.dark .status-processing {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

html.dark .status-failed {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

html.dark .status-pending {
  background-color: rgba(234, 179, 8, 0.15) !important;
  color: #fcd34d !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-100,
html.dark .bg-green-100,
html.dark .bg-orange-100,
html.dark .bg-purple-100,
html.dark .bg-red-100,
html.dark .bg-yellow-100,
html.dark .bg-indigo-100,
html.dark .bg-pink-100,
html.dark .bg-cyan-100,
html.dark .bg-slate-100,
html.dark .bg-emerald-100,
html.dark .bg-teal-50,
html.dark .bg-purple-50,
html.dark .bg-green-50,
html.dark .bg-blue-200,
html.dark .bg-red-200,
html.dark .bg-yellow-200,
html.dark .bg-orange-200,
html.dark .bg-gray-200,
html.dark .bg-gray-300 {
  background-color: rgba(148, 163, 184, 0.08) !important;
}

html.dark .progress-bar {
  background-color: rgba(148, 163, 184, 0.3) !important;
}

html.dark .progress-bar-fill {
  background-color: #6366f1 !important;
}

html.dark .badge,
html.dark .pill,
html.dark .rounded-full {
  color: inherit;
}

html.dark .nav-surface {
  background: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(10px);
  border-color: #1f2937 !important;
}

html.dark .muted-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(59, 130, 246, 0.08));
  border-color: #1f2937 !important;
}

html.dark code,
html.dark pre {
  background-color: rgba(148, 163, 184, 0.12);
  color: #e5e7eb;
  padding: 0 4px;
  border-radius: 3px;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b;
}

/* Top-bar usage display: punch up so the value isn't lost in muted gray */
html.dark #usage-display,
html.dark #subscription-info {
  color: #e5e7eb !important;
}

/* Summary body text: bump to whitesmoke for contrast on dark cards.
   Targets the .text-blue-700 / .text-blue-800 inline classes that win otherwise. */
html.dark .summary-container,
html.dark .summary-container .text-blue-700,
html.dark .summary-container .text-blue-800,
html.dark .markdown-content,
html.dark .markdown-content *,
html.dark .markdown-content p,
html.dark .markdown-content li,
html.dark .markdown-content strong,
html.dark .markdown-content em,
html.dark .markdown-content blockquote,
html.dark .markdown-content h1,
html.dark .markdown-content h2,
html.dark .markdown-content h3,
html.dark .markdown-content h4,
html.dark .markdown-content h5,
html.dark .markdown-content h6 {
  color: whitesmoke !important;
}

/* Tag chips: keep readable on dark cards */
html.dark .job-tags span {
  background-color: rgba(99, 102, 241, 0.18) !important;
  color: #c7d2fe !important;
}
html.dark .job-tags span:hover {
  background-color: rgba(99, 102, 241, 0.32) !important;
}

/* Keep links inside summary distinguishable */
html.dark .summary-container a,
html.dark .markdown-content a {
  color: #93c5fd !important;
}