/*
 * Surva.ai app dark mode override sheet.
 * Loaded by sharedComponents.jsp on all member app pages.
 * Remaps the app's standard light utility classes under html.dark
 * so individual views do not need per-element dark: variants.
 */

html.dark {
    color-scheme: dark;
}

/* Base */
html.dark,
html.dark body {
    background-color: #0b1120;
    color: #cbd5e1;
}

/* Backgrounds */
html.dark .bg-white { background-color: #0f172a; }
html.dark .bg-gray-50,
html.dark .bg-slate-50 { background-color: #0b1120; }
html.dark .bg-gray-100 { background-color: #1e293b; }
html.dark .bg-gray-200 { background-color: #334155; }

/* Text */
html.dark .text-black,
html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-600 { color: #94a3b8; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }

/* Borders and dividers */
html.dark .border-gray-100 { border-color: #1e293b; }
html.dark .border-gray-200 { border-color: #1e293b; }
html.dark .border-gray-300 { border-color: #334155; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; }

/* Hover states */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover { background-color: #1e293b; }
html.dark .hover\:bg-gray-200:hover { background-color: #334155; }
html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-gray-700:hover { color: #f1f5f9; }
html.dark .hover\:text-gray-600:hover { color: #cbd5e1; }
html.dark .hover\:border-gray-300:hover { border-color: #475569; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.12); }
html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.15); }

/* Colored tints (badges, pills, callouts) */
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.24); }
html.dark .text-indigo-900,
html.dark .text-indigo-800,
html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .border-indigo-100,
html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35); }

html.dark .bg-emerald-50,
html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.13); }
html.dark .bg-emerald-100,
html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.22); }
html.dark .text-emerald-800,
html.dark .text-emerald-700,
html.dark .text-green-800,
html.dark .text-green-700 { color: #6ee7b7; }
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.35); }

html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.22); }
html.dark .text-red-800,
html.dark .text-red-700 { color: #fca5a5; }
html.dark .border-red-100,
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }

html.dark .bg-amber-50,
html.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.13); }
html.dark .bg-amber-100,
html.dark .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.22); }
html.dark .text-amber-800,
html.dark .text-amber-700,
html.dark .text-yellow-800,
html.dark .text-yellow-700 { color: #fcd34d; }
html.dark .border-amber-100,
html.dark .border-amber-200,
html.dark .border-yellow-200 { border-color: rgba(245, 158, 11, 0.35); }

html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.13); }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22); }
html.dark .text-blue-800,
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .border-blue-100,
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35); }

html.dark .bg-purple-50,
html.dark .bg-violet-50 { background-color: rgba(168, 85, 247, 0.13); }
html.dark .bg-purple-100,
html.dark .bg-violet-100 { background-color: rgba(168, 85, 247, 0.22); }
html.dark .text-purple-800,
html.dark .text-purple-700,
html.dark .text-violet-700 { color: #d8b4fe; }

/* Forms */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b; }

/* Shadows: soften on dark */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.6); --tw-shadow: var(--tw-shadow-colored); }

/* Shared components (sharedComponents.jsp) */
html.dark .surva-card,
html.dark .card {
    background-color: #0f172a;
    border-color: #1e293b;
}
html.dark .surva-card-header { border-bottom-color: #1e293b; }
html.dark .surva-card-footer {
    border-top-color: #1e293b;
    background-color: #0b1120;
}

html.dark .surva-pill,
html.dark .tab-pill,
html.dark .filter-pill {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}
html.dark .surva-pill:hover,
html.dark .tab-pill:hover,
html.dark .filter-pill:hover {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.45);
}
html.dark .surva-pill-active,
html.dark .surva-pill.active,
html.dark .tab-pill-active,
html.dark .tab-pill.active,
html.dark .filter-pill-active,
html.dark .filter-pill.active {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

html.dark .surva-visibility-circle .bg { stroke: #334155; }
html.dark .surva-visibility-value { color: #cbd5e1; }

html.dark .surva-modal-overlay { background-color: rgba(0, 0, 0, 0.7); }
html.dark .surva-modal-content { background: #0f172a; }

html.dark .surva-bar { background-color: #334155; }

/* Badges: translucent dark variants */
html.dark .surva-badge-content { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html.dark .surva-badge-ai { background-color: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
html.dark .surva-badge-schema { background-color: rgba(245, 158, 11, 0.2); color: #fcd34d; }
html.dark .surva-badge-authority { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html.dark .surva-badge-query { background-color: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
html.dark .surva-badge-freshness { background-color: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
html.dark .surva-badge-comparison { background-color: rgba(6, 182, 212, 0.2); color: #67e8f9; }
html.dark .surva-badge-critical { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; }
html.dark .surva-badge-high { background-color: rgba(249, 115, 22, 0.2); color: #fdba74; }
html.dark .surva-badge-medium { background-color: rgba(234, 179, 8, 0.2); color: #fde047; }
html.dark .surva-badge-low { background-color: rgba(34, 197, 94, 0.2); color: #86efac; }

/* Scrollbars */
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* Gradient stops: remap light -50 tints to dark translucent equivalents */
html.dark .from-indigo-50 { --tw-gradient-from: rgba(99, 102, 241, 0.14) var(--tw-gradient-from-position); --tw-gradient-to: rgba(99, 102, 241, 0) var(--tw-gradient-to-position); }
html.dark .from-purple-50 { --tw-gradient-from: rgba(168, 85, 247, 0.14) var(--tw-gradient-from-position); --tw-gradient-to: rgba(168, 85, 247, 0) var(--tw-gradient-to-position); }
html.dark .from-blue-50 { --tw-gradient-from: rgba(59, 130, 246, 0.14) var(--tw-gradient-from-position); --tw-gradient-to: rgba(59, 130, 246, 0) var(--tw-gradient-to-position); }
html.dark .from-green-50 { --tw-gradient-from: rgba(34, 197, 94, 0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(34, 197, 94, 0) var(--tw-gradient-to-position); }
html.dark .from-emerald-50 { --tw-gradient-from: rgba(16, 185, 129, 0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(16, 185, 129, 0) var(--tw-gradient-to-position); }
html.dark .from-amber-50 { --tw-gradient-from: rgba(245, 158, 11, 0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(245, 158, 11, 0) var(--tw-gradient-to-position); }
html.dark .from-orange-50 { --tw-gradient-from: rgba(249, 115, 22, 0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(249, 115, 22, 0) var(--tw-gradient-to-position); }
html.dark .from-yellow-50 { --tw-gradient-from: rgba(234, 179, 8, 0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(234, 179, 8, 0) var(--tw-gradient-to-position); }
html.dark .from-gray-100 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: rgba(30, 41, 59, 0) var(--tw-gradient-to-position); }
html.dark .to-indigo-50 { --tw-gradient-to: rgba(99, 102, 241, 0.14) var(--tw-gradient-to-position); }
html.dark .to-purple-50 { --tw-gradient-to: rgba(168, 85, 247, 0.14) var(--tw-gradient-to-position); }
html.dark .to-blue-50 { --tw-gradient-to: rgba(59, 130, 246, 0.14) var(--tw-gradient-to-position); }
html.dark .to-teal-50 { --tw-gradient-to: rgba(20, 184, 166, 0.12) var(--tw-gradient-to-position); }
html.dark .to-orange-50 { --tw-gradient-to: rgba(249, 115, 22, 0.12) var(--tw-gradient-to-position); }
html.dark .to-amber-50 { --tw-gradient-to: rgba(245, 158, 11, 0.12) var(--tw-gradient-to-position); }

/* Tabs (.tab-active defined inline in several views): brighten indigo on dark */
html.dark .tab-active {
    color: #818cf8;
    border-bottom-color: #818cf8;
}
html.dark .tab-inactive { color: #94a3b8; }
html.dark .tab-inactive:hover {
    color: #cbd5e1;
    border-bottom-color: #334155;
}

/* Indigo accents: use lighter indigo for contrast against dark backgrounds */
html.dark .text-indigo-600 { color: #818cf8; }
html.dark .border-indigo-500,
html.dark .border-indigo-600 { border-color: #818cf8; }
html.dark .hover\:text-indigo-700:hover,
html.dark .hover\:text-indigo-800:hover { color: #a5b4fc; }

/* Stat cards (defined inline in some views) */
html.dark .stat-card {
    background: #0f172a;
    border-color: #1e293b;
}

/* AI platform badges (defined inline in some views) */
html.dark .platform-chatgpt { background-color: rgba(34, 197, 94, 0.18); color: #86efac; }
html.dark .platform-claude { background-color: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html.dark .platform-gemini { background-color: rgba(168, 85, 247, 0.18); color: #d8b4fe; }
html.dark .platform-google { background-color: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html.dark .platform-perplexity { background-color: rgba(59, 130, 246, 0.18); color: #93c5fd; }

/* Insights and Alerts table (opportunities.jsp) */
html.dark .opp-table th {
    background: #0b1120;
    color: #94a3b8;
    border-bottom-color: #1e293b;
}
html.dark .opp-table th.sortable:hover {
    color: #cbd5e1;
    background: #1e293b;
}
html.dark .opp-table td { border-bottom-color: #1e293b; }
html.dark .opp-table tbody tr:hover { background-color: #1e293b; }
html.dark .opp-table tbody tr.selected { background-color: rgba(99, 102, 241, 0.15); }

/* Slide-out detail panels (defined inline in some views) */
html.dark .detail-panel {
    background: #0f172a;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}
html.dark .slideout-overlay { background-color: rgba(0, 0, 0, 0.6); }

/* Status and priority tags (defined inline in some views) */
html.dark .status-new { background-color: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
html.dark .status-reviewing { background-color: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html.dark .status-in_progress { background-color: rgba(59, 130, 246, 0.18); color: #93c5fd; }
html.dark .status-completed { background-color: rgba(34, 197, 94, 0.18); color: #86efac; }
html.dark .status-dismissed { background-color: #1e293b; color: #94a3b8; }
html.dark .priority-critical { background-color: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html.dark .priority-high { background-color: rgba(249, 115, 22, 0.18); color: #fdba74; }
html.dark .priority-medium { background-color: rgba(234, 179, 8, 0.18); color: #fde047; }
html.dark .priority-low { background-color: rgba(34, 197, 94, 0.18); color: #86efac; }

/* Content planner calendar (contentPlanner.jsp) */
html.dark .calendar-day {
    background-color: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
html.dark .calendar-day.past {
    background-color: #0b1120;
    border-color: #1e293b;
}
html.dark .calendar-day.drag-over { background-color: rgba(99, 102, 241, 0.15); }
html.dark .month-separator {
    background-color: #1e293b;
    color: #cbd5e1;
}
html.dark .filter-pill-inactive {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}
html.dark .filter-pill-inactive:hover {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.45);
}

/* Content type badges (contentPlanner.jsp and others) */
html.dark .type-content { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html.dark .type-ai_visibility { background-color: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
html.dark .type-schema_markup { background-color: rgba(245, 158, 11, 0.2); color: #fcd34d; }
html.dark .type-authority_building { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html.dark .type-query_expansion { background-color: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
html.dark .type-content_freshness { background-color: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
html.dark .type-comparison_opportunity { background-color: rgba(6, 182, 212, 0.2); color: #67e8f9; }

