/* Custom styling to match Hudater Docs aesthetic */

:root {
  --md-primary-fg-color: #3f51b5;
  --md-primary-fg-color--dark: #303f9f;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1a1c23;
  --md-default-fg-color: #e2e8f0;
  --md-primary-fg-color: #3f51b5;
  --md-primary-bg-color: #1e2029;
}

/* Make text bright white on top navigation header bar */
.md-header,
.md-tabs {
  background-color: #3f51b5 !important;
}

.md-header__title,
.md-header__topic,
.md-header__button,
.md-tabs__link {
  color: #ffffff !important;
  opacity: 0.95;
}

.md-tabs__link {
  font-weight: 500;
  font-size: 0.85rem;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700;
}

/* Badge container */
.badge-container {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 12px 0 16px 0;
}

/* Custom pills for path tags */
.doc-pill {
  display: inline-block;
  padding: 3px 12px;
  margin-right: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 14px;
  background-color: #2d3748;
  color: #cbd5e0;
}

/* Checkmark step headers */
.step-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #4ade80;
}

/* Task list checkbox tweak */
.task-list-item input[type="checkbox"] {
  margin-right: 0.5em;
}

/* ======================================================
   Mermaid Diagrams High-Contrast Dark Theme Overrides
   ====================================================== */
.mermaid {
  text-align: center;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Node Boxes & Shapes */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: #1e293b !important;
  stroke: #6366f1 !important;
  stroke-width: 1.5px !important;
}

/* Node Text Labels */
.mermaid .node .label,
.mermaid .node text,
.mermaid .label text,
.mermaid .labelText,
.mermaid .loopText,
.mermaid .messageText,
.mermaid .noteText,
.mermaid .actor text,
.mermaid text,
.mermaid tspan {
  fill: #ffffff !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Sequence Diagram Actors */
.mermaid .actor {
  fill: #1e293b !important;
  stroke: #818cf8 !important;
  stroke-width: 2px !important;
}

/* Sequence Diagram Activation Lines & Arrows */
.mermaid .actor-line {
  stroke: #64748b !important;
  stroke-width: 1.5px !important;
}

.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: #38bdf8 !important;
  stroke-width: 1.5px !important;
}

/* Subgraph Containers */
.mermaid .cluster rect {
  fill: #111827 !important;
  stroke: #3b82f6 !important;
  stroke-width: 1.5px !important;
}

.mermaid .cluster text {
  fill: #60a5fa !important;
  font-weight: 600 !important;
}

/* Edge Connectors & Labels */
.mermaid .edgePath .path {
  stroke: #94a3b8 !important;
  stroke-width: 1.5px !important;
}

.mermaid .edgeLabel,
.mermaid .edgeLabel rect {
  background-color: #1e293b !important;
  fill: #1e293b !important;
}

.mermaid .edgeLabel text,
.mermaid span.edgeLabel {
  color: #f1f5f9 !important;
  fill: #f1f5f9 !important;
}

/* Notes & Warnings in Diagrams */
.mermaid .note {
  fill: #1e293b !important;
  stroke: #f59e0b !important;
}

.mermaid .noteText {
  fill: #fbbf24 !important;
}