/* ===========================================
   NextHop CMS - Styles
   =========================================== */

/* Base */
body { font-family: 'Inter', sans-serif; }
.dark body { background: #111827; color: #e5e7eb; }

/* Prose (Markdown) */
.prose { max-width: none; }
.prose h1 { font-size: 2em; font-weight: 700; margin: 1em 0 0.5em; }
.prose h2 { font-size: 1.5em; font-weight: 600; margin: 1em 0 0.5em; }
.prose h3 { font-size: 1.25em; font-weight: 600; margin: 1em 0 0.5em; }
.prose p { margin: 0.75em 0; line-height: 1.7; }
.prose ul, .prose ol { margin: 0.75em 0; padding-left: 1.5em; }
.prose li { margin: 0.25em 0; }
.prose blockquote { border-left: 3px solid #3B82F6; padding-left: 1em; margin: 1em 0; font-style: italic; color: #6B7280; }
.prose code { background: #F3F4F6; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
.prose pre { background: #1F2937; color: #E5E7EB; padding: 1em; border-radius: 8px; overflow-x: auto; }
.prose pre code { background: transparent; padding: 0; }
.prose a { color: #3B82F6; text-decoration: underline; }
.prose img { max-width: 100%; border-radius: 8px; margin: 1em 0; }

/* Dark prose */
.dark .prose h1, .dark .prose h2, .dark .prose h3 { color: #f1f5f9; }
.dark .prose p, .dark .prose li { color: #cbd5e1; }
.dark .prose blockquote { border-color: #60a5fa; color: #9ca3af; }
.dark .prose code { background: #374151; color: #e5e7eb; }
.dark .prose a { color: #60a5fa; }

/* Icons */
.icon { width: 1.25em; height: 1.25em; vertical-align: middle; }
.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 1.5em; height: 1.5em; }

/* Toast animations */
.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateX(100%); }

/* Markdown preview */
.markdown-preview { font-size: 0.95rem; }

/* Sortable headers */
.sortable-header { cursor: pointer; user-select: none; transition: background 0.15s; }
.sortable-header:hover { background: #e5e7eb; }
.sort-indicator { opacity: 0.4; margin-left: 4px; }
.sort-indicator.active { opacity: 1; color: #3B82F6; }
.dark .sortable-header:hover { background: #374151; }
.dark .sort-indicator.active { color: #60a5fa; }

/* Tabs */
.tab-btn { padding: 0.5rem 1rem; font-weight: 500; border-radius: 0.5rem; transition: all 0.15s; border: 1px solid transparent; }
.tab-btn:hover { background: #f3f4f6; }
.tab-btn.active { background: #3B82F6; color: white; }
.tab-btn .badge { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 9999px; margin-left: 0.5rem; }
.tab-btn.active .badge { background: rgba(255,255,255,0.25); }
.tab-btn:not(.active) .badge { background: #e5e7eb; }
.dark .tab-btn:hover { background: #374151; }
.dark .tab-btn.active { background: #2563eb; }
.dark .tab-btn:not(.active) .badge { background: #4b5563; }

/* Sankey Diagram */
.sankey-container { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border: 1px solid #e2e8f0; }
.sankey-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; }
.sankey-description { font-size: 0.875rem; color: #64748b; margin-bottom: 1rem; }
.dark .sankey-container { background: linear-gradient(135deg, #1e293b, #0f172a); border-color: #334155; }
.dark .sankey-title { color: #f1f5f9; }
.dark .sankey-description { color: #94a3b8; }

/* SWOT */
.swot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
.swot-quadrant { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.swot-header { padding: 0.75rem 1rem; font-weight: 600; color: white; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
.swot-content { padding: 1rem; background: white; }
.swot-content ul { margin: 0; padding: 0; list-style: none; }
.swot-content li { padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; }
.swot-content li:last-child { border-bottom: none; }
.swot-strengths .swot-header { background: linear-gradient(135deg, #10b981, #059669); }
.swot-weaknesses .swot-header { background: linear-gradient(135deg, #f59e0b, #d97706); }
.swot-opportunities .swot-header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.swot-threats .swot-header { background: linear-gradient(135deg, #ef4444, #dc2626); }
.dark .swot-quadrant { border-color: #374151; }
.dark .swot-content { background: #1f2937; }
.dark .swot-content li { border-color: #374151; color: #cbd5e1; }

/* Search highlight */
.highlight { background: #fef08a; padding: 0 2px; border-radius: 2px; }
.dark .highlight { background: #854d0e; color: #fef3c7; }

/* Map markers */
.custom-map-marker { background: none !important; border: none !important; }
.custom-map-marker svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); transition: transform 0.15s; cursor: pointer; }
.custom-map-marker:hover svg { transform: scale(1.3); }
.leaflet-popup-content-wrapper { border-radius: 12px !important; box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important; }
.leaflet-popup-content { margin: 12px 16px !important; }
.dark .leaflet-popup-content-wrapper { background: #1f2937 !important; color: #e5e7eb !important; }
.dark .leaflet-popup-tip { background: #1f2937 !important; }

/* Line clamp utility */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ===========================================
   Colorblind Palettes
   =========================================== */

:root {
  --cm-success: #10b981;
  --cm-warning: #f59e0b;
  --cm-error: #ef4444;
  --cm-info: #3b82f6;
}

/* Protanopia (no red perception) */
[data-color-mode="protanopia"] {
  --cm-success: #0077bb;
  --cm-warning: #ccbb44;
  --cm-error: #ee7733;
  --cm-info: #33bbee;
}

/* Deuteranopia (no green perception) */
[data-color-mode="deuteranopia"] {
  --cm-success: #0077bb;
  --cm-warning: #ee7733;
  --cm-error: #cc3311;
  --cm-info: #33bbee;
}

/* Tritanopia (no blue perception) */
[data-color-mode="tritanopia"] {
  --cm-success: #009988;
  --cm-warning: #ee7733;
  --cm-error: #ee3377;
  --cm-info: #0077bb;
}

/* Apply colorblind variables to semantic classes */
[data-color-mode]:not([data-color-mode="normal"]) .text-green-600,
[data-color-mode]:not([data-color-mode="normal"]) .text-green-700 { color: var(--cm-success) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .text-red-600,
[data-color-mode]:not([data-color-mode="normal"]) .text-red-700 { color: var(--cm-error) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .text-yellow-600,
[data-color-mode]:not([data-color-mode="normal"]) .text-yellow-700 { color: var(--cm-warning) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .bg-green-100 { background-color: color-mix(in srgb, var(--cm-success) 15%, white) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .bg-red-100 { background-color: color-mix(in srgb, var(--cm-error) 15%, white) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .bg-yellow-100 { background-color: color-mix(in srgb, var(--cm-warning) 15%, white) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .bg-green-600 { background-color: var(--cm-success) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .bg-red-600 { background-color: var(--cm-error) !important; }
[data-color-mode]:not([data-color-mode="normal"]) .bg-yellow-600 { background-color: var(--cm-warning) !important; }

/* Transition for theme switching */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}