/* Dark mode overrides for admin panel */
.dark body { background-color: #111827; color: #e5e7eb; }
.dark .bg-white { background-color: #1f2937 !important; }
.dark .bg-gray-50 { background-color: #1a2332 !important; }
.dark .bg-gray-100 { background-color: #1f2937 !important; }
.dark .text-gray-900 { color: #f3f4f6 !important; }
.dark .text-gray-800 { color: #e5e7eb !important; }
.dark .text-gray-700 { color: #d1d5db !important; }
.dark .text-gray-600 { color: #9ca3af !important; }
.dark .text-gray-500 { color: #9ca3af !important; }
.dark .text-gray-400 { color: #6b7280 !important; }
.dark .border-gray-200 { border-color: #374151 !important; }
.dark .border-gray-100 { border-color: #1f2937 !important; }
.dark .divide-gray-50 > * + * { border-color: #374151 !important; }
.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; }
.dark input, .dark textarea, .dark select { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; }
.dark input::placeholder, .dark textarea::placeholder { color: #6b7280 !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
.dark table thead { background-color: #1f2937; }
.dark .rounded-2xl { border-color: #374151; }

/* Keep accent colors vivid in dark mode */
.dark .bg-violet-600 { background-color: #7c3aed !important; }
.dark .bg-red-600 { background-color: #dc2626 !important; }
.dark .bg-green-50 { background-color: #064e3b !important; }
.dark .bg-red-50 { background-color: #450a0a !important; }
.dark .bg-yellow-50 { background-color: #451a03 !important; }
.dark .bg-blue-50 { background-color: #172554 !important; }
.dark .bg-amber-50 { background-color: #451a03 !important; }
.dark .text-green-700 { color: #4ade80 !important; }
.dark .text-red-700, .dark .text-red-600 { color: #f87171 !important; }
.dark .text-yellow-700 { color: #fbbf24 !important; }
.dark .text-blue-700 { color: #60a5fa !important; }

/* ── Extended background overrides ──────────────────────────────────── */
.dark .bg-violet-50  { background-color: #1e1340 !important; }
.dark .bg-violet-100 { background-color: #2d1b69 !important; }
.dark .bg-indigo-50  { background-color: #1e2040 !important; }
.dark .bg-indigo-100 { background-color: #1e2a5e !important; }
.dark .bg-teal-50    { background-color: #042f2e !important; }
.dark .bg-teal-100   { background-color: #042f2e !important; }
.dark .bg-green-100  { background-color: #052e16 !important; }
.dark .bg-red-100    { background-color: #450a0a !important; }
.dark .bg-yellow-100 { background-color: #451a03 !important; }
.dark .bg-amber-100  { background-color: #451a03 !important; }
.dark .bg-orange-50  { background-color: #431407 !important; }
.dark .bg-orange-100 { background-color: #431407 !important; }
.dark .bg-pink-50    { background-color: #500724 !important; }
.dark .bg-pink-100   { background-color: #500724 !important; }
.dark .bg-emerald-50  { background-color: #022c22 !important; }
.dark .bg-emerald-100 { background-color: #064e3b !important; }
.dark .bg-blue-100   { background-color: #172554 !important; }
.dark .bg-cyan-50    { background-color: #083344 !important; }
.dark .bg-cyan-100   { background-color: #083344 !important; }
.dark .bg-purple-50  { background-color: #1e1340 !important; }
.dark .bg-purple-100 { background-color: #2d1b69 !important; }
.dark .bg-gray-200   { background-color: #374151 !important; }
.dark .bg-gray-300   { background-color: #4b5563 !important; }

/* ── Extended text color overrides ──────────────────────────────────── */
.dark .text-violet-600 { color: #a78bfa !important; }
.dark .text-violet-700 { color: #a78bfa !important; }
.dark .text-violet-800 { color: #c4b5fd !important; }
.dark .text-indigo-700 { color: #818cf8 !important; }
.dark .text-indigo-800 { color: #a5b4fc !important; }
.dark .text-blue-600   { color: #60a5fa !important; }
.dark .text-blue-800   { color: #93c5fd !important; }
.dark .text-teal-700   { color: #5eead4 !important; }
.dark .text-teal-800   { color: #99f6e4 !important; }
.dark .text-green-600  { color: #4ade80 !important; }
.dark .text-green-800  { color: #86efac !important; }
.dark .text-red-500    { color: #f87171 !important; }
.dark .text-red-800    { color: #fca5a5 !important; }
.dark .text-amber-600  { color: #fbbf24 !important; }
.dark .text-amber-700  { color: #fde68a !important; }
.dark .text-amber-800  { color: #fde68a !important; }
.dark .text-orange-600 { color: #fb923c !important; }
.dark .text-orange-700 { color: #fdba74 !important; }
.dark .text-orange-800 { color: #fed7aa !important; }
.dark .text-pink-700   { color: #f9a8d4 !important; }
.dark .text-pink-800   { color: #fbcfe8 !important; }
.dark .text-cyan-700   { color: #67e8f9 !important; }
.dark .text-cyan-800   { color: #a5f3fc !important; }
.dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-emerald-700 { color: #6ee7b7 !important; }
.dark .text-purple-700  { color: #c084fc !important; }
.dark .text-purple-800  { color: #d8b4fe !important; }
.dark .text-gray-300    { color: #d1d5db !important; }

/* ── Extended border overrides ───────────────────────────────────────── */
.dark .border-violet-100 { border-color: #2d1b69 !important; }
.dark .border-violet-200 { border-color: #4c1d95 !important; }
.dark .border-green-100  { border-color: #064e3b !important; }
.dark .border-green-200  { border-color: #065f46 !important; }
.dark .border-red-100    { border-color: #450a0a !important; }
.dark .border-red-200    { border-color: #7f1d1d !important; }
.dark .border-blue-100   { border-color: #172554 !important; }
.dark .border-blue-200   { border-color: #1e3a5f !important; }
.dark .border-amber-200   { border-color: #78350f !important; }
.dark .border-emerald-200 { border-color: #065f46 !important; }
.dark .border-orange-200  { border-color: #7c2d12 !important; }
.dark .border-pink-200    { border-color: #831843 !important; }
.dark .border-teal-200    { border-color: #134e4a !important; }
.dark .border-purple-200  { border-color: #581c87 !important; }
.dark .border-gray-300    { border-color: #4b5563 !important; }

/* ── Section header overrides (help page, task templates, etc.) ──────── */
html.dark [data-dark-bg] { background-color: var(--dark-bg) !important; }

/* ── Hover state overrides ────────────────────────────────────────────── */
.dark .hover\:bg-violet-50:hover   { background-color: #1e1340 !important; }
.dark .hover\:bg-violet-100:hover  { background-color: #2d1b69 !important; }
.dark .hover\:text-violet-700:hover { color: #a78bfa !important; }
.dark .hover\:bg-gray-100:hover    { background-color: #374151 !important; }
.dark .hover\:bg-red-50:hover      { background-color: #450a0a !important; }

/* ── Dividers ─────────────────────────────────────────────────────────── */
.dark .divide-gray-100 > * + * { border-color: #1f2937 !important; }
.dark .divide-gray-200 > * + * { border-color: #374151 !important; }

/* ── Tab & badge: active states (docs tabs use bg-red-50 text-red-700) ─ */
.dark .border-red-100  { border-color: #450a0a !important; }
.dark .border-red-200  { border-color: #7f1d1d !important; }

/* ── ApexCharts dark mode ─────────────────────────────────────────────── */
.dark .apexcharts-canvas text { fill: #d1d5db !important; }
.dark .apexcharts-xaxis-label text,
.dark .apexcharts-yaxis-label text { fill: #9ca3af !important; }
.dark .apexcharts-legend-text { color: #d1d5db !important; }
.dark .apexcharts-tooltip {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
.dark .apexcharts-tooltip-title {
    background: #111827 !important;
    border-bottom-color: #374151 !important;
    color: #f3f4f6 !important;
}
.dark .apexcharts-tooltip-text-y-label,
.dark .apexcharts-tooltip-text-y-value { color: #e5e7eb !important; }
.dark .apexcharts-xaxistooltip {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
.dark .apexcharts-xaxistooltip-bottom:after  { border-bottom-color: #374151 !important; }
.dark .apexcharts-xaxistooltip-bottom:before { border-bottom-color: #1f2937 !important; }
.dark .apexcharts-gridline { stroke: #374151 !important; }
.dark .apexcharts-grid line { stroke: #374151 !important; }
.dark .apexcharts-grid-borders line { stroke: #374151 !important; }
.dark .apexcharts-xaxis line,
.dark .apexcharts-yaxis line { stroke: #4b5563 !important; }
.dark .apexcharts-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
.dark .apexcharts-menu-item { color: #e5e7eb !important; }
.dark .apexcharts-menu-item:hover { background: #374151 !important; color: #f3f4f6 !important; }
.dark .apexcharts-toolbar svg { fill: #9ca3af !important; }
.dark .apexcharts-toolbar svg:hover { fill: #e5e7eb !important; }