/* Base styles */
body { /* Added to body to override Tailwind's default font-weight */
    font-weight: bold;
}

.dark {
    color-scheme: dark;
}

.dark body {
    background-color: #111827;
    color: #f9fafb;
}

/* Sidebar styles */
.sidebar-expanded {
    width: 16rem; /* Or 200px, or whatever width you want */
    transition: width 0.3s ease-in-out; /* For smooth transitions */
}

.sidebar-collapsed {
    width: 4rem; /* Or smaller width for collapsed state */
    transition: width 0.3s ease-in-out;
}

#main-content { /* Added to ensure main content takes up remaining space */
    width: calc(100% - 16rem); /* Adjust based on sidebar-expanded width */
    transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out; /* Smooth transitions */
    margin-left: 16rem; /* Initial margin for expanded sidebar */
}

/* Media query for small screens */
@media (max-width: 768px) {
    .sidebar-expanded {
        width: 4rem;
    }

    #main-content {
        width: calc(100% - 4rem); /* Adjust based on sidebar-expanded width */
        margin-left: 4rem;
    }

    .sidebar-text {
        display: none;
    }
}

/* ... (Rest of your CSS: Logo styles, dark mode overrides, navigation, etc.) */



/* Logo styles */
.logo-container {
  display: flex;
  align-items: center;
}

.logo-image {
  max-height: 40px;
  margin-right: 10px;
}

.logo-image-large {
  max-height: 400px;
  margin-bottom: 10px;
}

/* IMPROVED: Dark mode overrides with higher specificity */
.dark .bg-white {
  background-color: #1f2937 !important;
}

/* Comprehensive text color overrides for dark mode */
.dark p, 
.dark li,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark span:not(.raspberry-pi-red):not(.ocean-blue) {
  color: #f9fafb !important;
}

.dark .text-gray-900 {
  color: #f9fafb !important;
}

.dark .text-gray-800 {
  color: #f3f4f6 !important;
}

.dark .text-gray-700 {
  color: #e5e7eb !important;
}

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

.dark .text-gray-500 {
  color: #9ca3af !important;
}

.dark .text-gray-400 {
  color: #d1d5db !important;
}

.dark .border-gray-200 {
  border-color: #374151 !important;
}

/* Navigation highlight colors */
.nav-item {
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: #f3f4f6;
}

.dark .nav-item:hover {
  background-color: #374151;
}

.nav-item.active {
  background-color: #dbeafe; /* Light blue in light mode */
}

.dark .nav-item.active {
  background-color: #0c4a6e; /* Deep ocean blue in dark mode */
}

/* Acronym styling */
.acronym {
  font-weight: 600;
  line-height: 1.5;
}

.acronym-text {
  color: #4b5563; /* Medium gray in light mode */
}

.dark .acronym-text {
  color: #e5e7eb !important; /* Very light gray in dark mode */
}

.raspberry-pi-red {
  color: #c51d4a; /* Raspberry Pi red color */
}

.dark .raspberry-pi-red {
  color: #ff4b6e !important; /* Brighter red for dark mode */
}

.ocean-blue {
  color: #0284c7; /* Ocean blue color */
}

.dark .ocean-blue {
  color: #38bdf8 !important; /* Brighter blue for dark mode */
}

/* IMPROVED: Feature boxes in dark mode */
.dark .bg-green-50 {
  background-color: rgba(6, 78, 59, 0.4) !important; /* Dark green background */
}

.dark .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.4) !important; /* Dark blue background */
}

.dark .bg-purple-50 {
  background-color: rgba(91, 33, 182, 0.4) !important; /* Dark purple background */
}

.dark .bg-yellow-50 {
  background-color: rgba(120, 53, 15, 0.4) !important; /* Dark amber background */
}

/* IMPROVED: Text colors in feature boxes */
.dark .bg-green-50 h4.text-green-700,
.dark .bg-blue-50 h4.text-blue-700,
.dark .bg-purple-50 h4.text-blue-700,
.dark .bg-yellow-50 h4.text-yellow-700 {
  color: #ecfdf5 !important; /* Very light green for headings */
}

.dark .text-green-700 {
  color: #10b981 !important; /* Bright green in dark mode */
}

.dark .text-green-300 {
  color: #6ee7b7 !important; /* Light green in dark mode */
}

.dark .text-blue-700 {
  color: #3b82f6 !important; /* Bright blue in dark mode */
}

.dark .text-blue-300 {
  color: #93c5fd !important; /* Light blue in dark mode */
}

.dark .text-yellow-700 {
  color: #fbbf24 !important; /* Bright yellow in dark mode */
}

.dark .text-yellow-300 {
  color: #fcd34d !important; /* Light yellow in dark mode */
}

/* IMPROVED: List items in feature boxes */
.dark .bg-green-50 ul li,
.dark .bg-blue-50 ul li,
.dark .bg-purple-50 ul li,
.dark .bg-yellow-50 ul li {
  color: #d1fae5 !important; /* Very light green text for list items */
}

/* Mermaid diagram styling */
.mermaid {
  overflow: auto;
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

.dark .mermaid {
  background-color: #1e293b; /* dark blue-gray-800 */
}

/* Make sure the diagram is responsive */
.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Improve text readability in diagrams */
.mermaid .label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

/* Add some space around the diagram container */
[data-diagram] {
  margin: 1rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Watermaker Diagram Styles */
.watermaker-diagram-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

#watermaker-diagram {
  min-height: 400px;
  position: relative;
}

#watermaker-svg {
  width: 100%;
  height: auto;
}

/* Component highlighting on hover */
.component-hover {
  cursor: pointer;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.component-hover:hover {
  filter: brightness(1.2);
  opacity: 0.9;
}

/* Component areas should be completely transparent by default */
.component-area {
  fill: transparent !important;
  stroke: none;
  cursor: pointer;
}

/* Subtle highlight on hover for component areas */
.component-area:hover {
  fill: rgba(59, 130, 246, 0.15) !important; /* Light blue with low opacity */
  stroke: #3b82f6;
  stroke-width: 1;
  stroke-dasharray: none; /* Ensure no dashed lines from previous debugging */
}

.dark .component-area:hover {
  fill: rgba(96, 165, 250, 0.2) !important; /* Slightly brighter blue for dark mode */
  stroke: #60a5fa;
}

/* Flow animation styles - Improved */
@keyframes flowDash {
  to {
    stroke-dashoffset: -20;
  }
}

.flow-path {
  transition: stroke-dasharray 0.3s ease;
}

.flow-line-animated {
  stroke-dasharray: 10 !important;
  stroke-dashoffset: 0;
  animation: flowDash 1s linear infinite;
}

/* Component details panel */
#component-details {
  transition: all 0.3s ease;
}

#component-details.visible {
  display: block;
}

/* Pressure indicators */
.pressure-indicator {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pressure-indicator.visible {
  opacity: 1;
}

/* Improved tooltip styles */
.svg-tooltip {
  position: absolute;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.97);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  max-width: 280px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
  border-left: 4px solid #3b82f6;
  line-height: 1.5;
}

.dark .svg-tooltip {
  background-color: rgba(31, 41, 55, 0.97);
  color: #f3f4f6;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  border-left: 4px solid #60a5fa;
}

.svg-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.svg-tooltip-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #1e40af;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 6px;
  font-size: 15px;
}

.dark .svg-tooltip-title {
  color: #93c5fd;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.svg-tooltip-description {
  margin-bottom: 10px;
  color: #4b5563;
}

.dark .svg-tooltip-description {
  color: #d1d5db;
}

.svg-tooltip-specs,
.svg-tooltip-maintenance {
  font-size: 13px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  color: #6b7280;
}

.dark .svg-tooltip-specs,
.dark .svg-tooltip-maintenance {
  color: #9ca3af;
}

/* Icons within specs/maintenance */
.svg-tooltip-specs::before,
.svg-tooltip-maintenance::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.svg-tooltip-specs::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%233b82f6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>');
}

.dark .svg-tooltip-specs::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%2360a5fa"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>');
}

.svg-tooltip-maintenance::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%233b82f6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>');
}

.dark .svg-tooltip-maintenance::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%2360a5fa"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>');
}

/* Legend styles */
#diagram-legend {
  transition: all 0.3s ease;
  max-width: 100%;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
}

#toggle-legend {
  transition: background-color 0.3s ease;
}

/* Ensure legend items align properly */
#diagram-legend .grid {
  align-items: center;
}

/* Color indicators in legend */
#diagram-legend .color-indicator {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dark #diagram-legend .color-indicator {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Loading indicator */
.diagram-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.dark .diagram-loading {
  background-color: rgba(31, 41, 55, 0.5);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  border-top-color: #3b82f6;
  animation: spin 1s linear infinite;
}

.dark .spinner {
  border-color: rgba(96, 165, 250, 0.2);
  border-top-color: #60a5fa;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* IMPROVED: Documentation-specific styles */
.dark .border-l-4.border-blue-500 h4 {
  color: #f9fafb !important;
}

.dark .border-l-4.border-blue-500 p {
  color: #e5e7eb !important;
}

/* IMPROVED: Documentation navigation items */
.dark a.bg-blue-50:hover {
  background-color: rgba(30, 58, 138, 0.6) !important;
}

/* IMPROVED: FAQ section */
.dark .text-lg.font-semibold {
  color: #f9fafb !important;
}
/* Add these to your existing styles.css */

/* Component area border styles */
.component-area-border-dotted-blue {
  stroke: #3b82f6 !important;
  stroke-width: 6px !important;
  stroke-dasharray: 5, 3 !important;
  fill: transparent !important;
}

.component-area-border-dotted-green {
  stroke: #10b981 !important;
  stroke-width: 6px !important;
  stroke-dasharray: 5, 3 !important;
  fill: transparent !important;
}

.component-area-border-dotted-red {
  stroke: #ef4444 !important;
  stroke-width: 6px !important;
  stroke-dasharray: 5, 3 !important;
  fill: transparent !important;
}

.component-area-border-dotted-purple {
  stroke: #8b5cf6 !important;
  stroke-width: 6px !important;
  stroke-dasharray: 5, 3 !important;
  fill: transparent !important;
}

/* Dark mode versions */
.dark .component-area-border-dotted-blue {
  stroke: #60a5fa !important;
  fill: transparent !important;
}

.dark .component-area-border-dotted-green {
  stroke: #34d399 !important;
  fill: transparent !important;
}

.dark .component-area-border-dotted-red {
  stroke: #f87171 !important;
  fill: transparent !important;
}

.dark .component-area-border-dotted-purple {
  stroke: #a78bfa !important;
  fill: transparent !important;
}

/* Hover effect for bordered areas */
.component-area-border-dotted-blue:hover,
.component-area-border-dotted-green:hover,
.component-area-border-dotted-red:hover,
.component-area-border-dotted-purple:hover {
  stroke-width: 6px !important;
  fill: rgba(255, 255, 255, 0.1) !important;
}

.dark .component-area-border-dotted-blue:hover,
.dark .component-area-border-dotted-green:hover,
.dark .component-area-border-dotted-red:hover,
.dark .component-area-border-dotted-purple:hover {
  fill: rgba(255, 255, 255, 0.15) !important;
}

/* Ensure component group borders are transparent */
rect[class^="component-group-border-"] {
  fill: transparent !important;
}

.dark rect[class^="component-group-border-"] {
  fill: transparent !important;
}
/* Additional styles for components page */
.component-image {
  width: 100px;
  height: 100px;
  min-width: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.component-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.component-card {
  padding: 1rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.dark .component-card {
  background-color: #1f2937;
}
.component-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.buy-button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background-color: #f59e0b;
  color: white;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s;
}
.buy-button:hover {
  background-color: #d97706;
}