/* Custom styles for Business OS */

/* Smooth page transitions */
#content {
  animation: fadeIn 0.15s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mermaid SVG container */
.mermaid-container svg {
  max-width: 100%;
  height: auto;
}

/* Markdown rendered content */
.markdown-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.markdown-content h2 { font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 0.5rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25rem; }
.markdown-content h3 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.markdown-content p { margin: 0.5rem 0; line-height: 1.7; }
.markdown-content ul { list-style: disc; margin-left: 1.5rem; margin-top: 0.25rem; margin-bottom: 0.5rem; }
.markdown-content ol { list-style: decimal; margin-left: 1.5rem; margin-top: 0.25rem; margin-bottom: 0.5rem; }
.markdown-content li { margin: 0.25rem 0; line-height: 1.6; }
.markdown-content code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
.markdown-content pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 0.75rem 0; }
.markdown-content pre code { background: none; padding: 0; color: inherit; }
.markdown-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
.markdown-content strong { font-weight: 600; }

/* Checklist styling */
.markdown-content input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: #3b82f6;
}
.markdown-content li:has(input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.5rem;
}

/* Editor textarea */
.code-editor {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  tab-size: 2;
  resize: vertical;
}

/* Nav active state */
.nav-item.active {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
}

/* Badge colors */
.badge-growth { background: #dcfce7; color: #166534; }
.badge-fulfillment { background: #dbeafe; color: #1e40af; }
.badge-innovation { background: #fef3c7; color: #92400e; }
.badge-custom { background: #f3f4f6; color: #374151; }

/* Key step badge in legend */
.key-step-badge {
  display: inline-block;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  white-space: nowrap;
}

/* Key step node hover effect in SVG */
.key-step-node:hover {
  filter: brightness(0.9);
}
.key-step-node:hover rect,
.key-step-node:hover polygon {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}