/* ─────────────────────────────────────────────────────────────────────────────
   Base Settings
   ───────────────────────────────────────────────────────────────────────────── */
   .mermaid {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
  }
  
  /* Make sure the overall SVG has no ugly default borders/margins */
  .mermaid svg {
    background-color: #fffffff0;
    overflow: visible;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Node Styles (flowchart, class, state, C4, etc.)
     ───────────────────────────────────────────────────────────────────────────── */
  .mermaid .node rect,
  .mermaid .node circle,
  .mermaid .node ellipse,
  .mermaid .node polygon {
    fill: #ecf0f1 !important;    /* very light gray */
    stroke: #34495e !important;  /* dark gray-blue */
    stroke-width: 1.5px !important;
    rx: 4px;                      /* rounded corners */
    ry: 4px;
  }
  
  .mermaid .label,
  .mermaid .node text,
  .mermaid .edgeLabel text {
    fill: #2c3e50 !important;
    font-weight: 400;
    font-size: 14px;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Cluster / Subgraph / Boundary Boxes
     ───────────────────────────────────────────────────────────────────────────── */
  .mermaid .cluster rect,
  .mermaid .subgraph rect,
  .mermaid .boundary rect {
    fill: #f8f9fa !important;    /* lighter gray */
    stroke: #bdc3c7 !important;  /* medium gray */
    stroke-dasharray: 3, 3;      /* dashed border */
  }
  
  /* Title text in clusters */
  .mermaid .cluster text,
  .mermaid .subgraph text {
    font-weight: 600;
    fill: #34495e !important;
    font-size: 15px;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Edges / Arrows
     ───────────────────────────────────────────────────────────────────────────── */
  .mermaid .edgePath path {
    stroke: #34495e !important;
    stroke-width: 1.2px;
  }
  
  .mermaid .arrowheadPath {
    fill: #34495e !important;
  }
  
  .mermaid .edgeLabel rect {
    fill: #ffffffaa !important; /* semi-opaque white background behind labels */
    stroke: none !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Sequence Diagrams
     ───────────────────────────────────────────────────────────────────────────── */
  .mermaid .sequenceDiagram {
    color: #2c3e50;
  }
  
  .mermaid .actor line, 
  .mermaid .actor text {
    stroke: #34495e;
    fill: #2c3e50;
  }
  
  .mermaid .messageLine {
    stroke: #34495e;
  }
  
  .mermaid .messageText {
    fill: #2c3e50;
  }
  
  /* Notes */
  .mermaid .note {
    fill: #f0f3f5 !important;
    stroke: #bdc3c7 !important;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Class & State Diagrams
     ───────────────────────────────────────────────────────────────────────────── */
  .mermaid .classDiagram .class rect,
  .mermaid .stateDiagram .state rect {
    fill: #ecf0f1 !important;
    stroke: #34495e !important;
  }
  
  .mermaid .classDiagram .class text,
  .mermaid .stateDiagram .state text {
    fill: #2c3e50 !important;
    font-size: 13px;
  }
  
  /* Relationships in class/state */
  .mermaid .classDiagram .relation,
  .mermaid .stateDiagram .relation {
    stroke: #34495e !important;
  }
  
  .mermaid .classDiagram .relation text,
  .mermaid .stateDiagram .relation text {
    fill: #2c3e50 !important;
    font-size: 12px;
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Gantt, Pie, ER, GitGraph, C4, etc.
     ───────────────────────────────────────────────────────────────────────────── */
  /* Gantt bars */
  .mermaid .gantt .bar {
    fill: #5dade2 !important;
    stroke: #2980b9 !important;
  }
  
  /* Pie slices */
  .mermaid .pieSlice path {
    stroke: #ffffff !important;
    stroke-width: 1px !important;
  }
  
  /* ER diagram entities */
  .mermaid .erDiagram .entity rect {
    fill: #ecf0f1 !important;
    stroke: #34495e !important;
  }
  
  /* C4 boundaries reuse .cluster */
  
  /* ─────────────────────────────────────────────────────────────────────────────
     Misc tweaks
     ───────────────────────────────────────────────────────────────────────────── */
  /* Zoom/pan background */
  .mermaid .zoom-rect {
    fill: none !important;
  }
  
  /* Link style */
  .mermaid a {
    text-decoration: none;
    color: inherit;
  }