/* =============================================================================
   Mermaid Themes — Socola Wiki
   3 phong cách: modern-soft / clean-corporate / dark-neon
   -----------------------------------------------------------------------------
   File này lo những thứ mà themeVariables (JS) KHÔNG làm được:
   - bo góc lớn cho node
   - shadow mềm / glow
   - đường nối cong mượt
   - gradient nền
   - hiệu ứng hover
   Áp dụng bằng cách thêm class vào thẻ bọc diagram:
     <div class="mmd-theme mmd-modern-soft"> ...svg mermaid... </div>
   Trong docsify thì class được gắn tự động qua mermaid-themes.js (mmd-theme +
   class theme đang chọn). Mọi rule đều scope dưới .mmd-theme để không đụng UI khác.
   ============================================================================= */

/* ---- Tokens dùng chung ------------------------------------------------------ */
.mmd-theme {
  --mmd-radius: 14px;          /* bo góc node                                   */
  --mmd-radius-sm: 8px;        /* bo góc nhỏ (label cạnh, note...)              */
  --mmd-stroke-w: 1.6px;       /* độ dày viền node                              */
  --mmd-edge-w: 2px;           /* độ dày đường nối                              */
  --mmd-transition: 160ms cubic-bezier(.4, 0, .2, 1);
  display: block;
  overflow-x: auto;            /* diagram rộng thì cuộn ngang, không vỡ layout  */
}

/* svg fill toàn bộ chiều ngang có sẵn, canh giữa */
.mmd-theme svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* đường nối: bo tròn đầu nối, mượt hơn */
.mmd-theme .edgePath .path,
.mmd-theme .flowchart-link,
.mmd-theme .relation,
.mmd-theme .messageLine0,
.mmd-theme .messageLine1,
.mmd-theme .transition {
  stroke-width: var(--mmd-edge-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* nhãn trên cạnh: nền bo góc nhẹ cho dễ đọc */
.mmd-theme .edgeLabel,
.mmd-theme .edgeLabel rect,
.mmd-theme .label foreignObject > div {
  border-radius: var(--mmd-radius-sm);
}

/* mũi tên không bị méo */
.mmd-theme marker path,
.mmd-theme .arrowheadPath {
  stroke: none;
}

/* =============================================================================
   1) MODERN SOFT  — bo góc lớn, pastel, shadow mềm, font hiện đại
   ============================================================================= */
.mmd-modern-soft {
  --mmd-radius: 18px;
  --mmd-stroke-w: 0px;         /* gần như không viền, dựa vào shadow            */
  --mmd-edge-w: 2px;
}

/* node chính: bo góc lớn + shadow mềm + chuyển động hover */
.mmd-modern-soft .node rect,
.mmd-modern-soft .node circle,
.mmd-modern-soft .node ellipse,
.mmd-modern-soft .node polygon,
.mmd-modern-soft .node path,
.mmd-modern-soft .cluster rect,
.mmd-modern-soft .actor,
.mmd-modern-soft .classGroup rect,
.mmd-modern-soft .stateGroup rect,
.mmd-modern-soft .er.entityBox,
.mmd-modern-soft .note rect {
  rx: var(--mmd-radius);
  ry: var(--mmd-radius);
  filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.18))
          drop-shadow(0 2px 4px rgba(15, 23, 42, 0.06));
  transition: filter var(--mmd-transition), transform var(--mmd-transition);
}

/* hover: nhấc node lên nhẹ */
.mmd-modern-soft .node:hover rect,
.mmd-modern-soft .node:hover circle,
.mmd-modern-soft .node:hover polygon,
.mmd-modern-soft .node:hover path {
  filter: drop-shadow(0 10px 24px rgba(99, 102, 241, 0.28))
          drop-shadow(0 3px 6px rgba(15, 23, 42, 0.08));
}

/* đường nối mềm, có shadow rất nhẹ */
.mmd-modern-soft .edgePath .path,
.mmd-modern-soft .flowchart-link,
.mmd-modern-soft .messageLine0,
.mmd-modern-soft .messageLine1,
.mmd-modern-soft .relation,
.mmd-modern-soft .transition {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.10));
}

/* cluster (subgraph): nền pastel trong suốt nhẹ */
.mmd-modern-soft .cluster rect {
  fill-opacity: 0.55;
}

/* =============================================================================
   2) CLEAN CORPORATE — góc bo nhẹ, xanh dương + xám, viền rõ, gọn gàng
   ============================================================================= */
.mmd-clean-corporate {
  --mmd-radius: 6px;
  --mmd-stroke-w: 1.5px;
  --mmd-edge-w: 1.6px;
}

.mmd-clean-corporate .node rect,
.mmd-clean-corporate .node polygon,
.mmd-clean-corporate .node path,
.mmd-clean-corporate .cluster rect,
.mmd-clean-corporate .actor,
.mmd-clean-corporate .classGroup rect,
.mmd-clean-corporate .stateGroup rect,
.mmd-clean-corporate .er.entityBox,
.mmd-clean-corporate .note rect {
  rx: var(--mmd-radius);
  ry: var(--mmd-radius);
  stroke-width: var(--mmd-stroke-w);
  filter: drop-shadow(0 1px 2px rgba(30, 58, 95, 0.12));
  transition: filter var(--mmd-transition);
}

.mmd-clean-corporate .node:hover rect,
.mmd-clean-corporate .node:hover polygon,
.mmd-clean-corporate .node:hover path {
  filter: drop-shadow(0 3px 8px rgba(30, 58, 95, 0.22));
}

/* cluster header rõ ràng, nền xám rất nhạt */
.mmd-clean-corporate .cluster rect {
  stroke-dasharray: 0;
  fill-opacity: 0.9;
}

/* =============================================================================
   3) DARK NEON — nền tối, accent sáng, glow nhẹ. Hợp slide tối.
   ============================================================================= */
.mmd-dark-neon {
  --mmd-radius: 12px;
  --mmd-stroke-w: 1.5px;
  --mmd-edge-w: 2px;
  background: radial-gradient(circle at 30% 0%, #1b2440 0%, #0b1020 60%, #070a16 100%);
  border-radius: 16px;
  padding: 22px;
  box-shadow: inset 0 0 60px rgba(56, 189, 248, 0.06);
}

.mmd-dark-neon .node rect,
.mmd-dark-neon .node circle,
.mmd-dark-neon .node ellipse,
.mmd-dark-neon .node polygon,
.mmd-dark-neon .node path,
.mmd-dark-neon .cluster rect,
.mmd-dark-neon .actor,
.mmd-dark-neon .classGroup rect,
.mmd-dark-neon .stateGroup rect,
.mmd-dark-neon .er.entityBox,
.mmd-dark-neon .note rect {
  rx: var(--mmd-radius);
  ry: var(--mmd-radius);
  stroke-width: var(--mmd-stroke-w);
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45))
          drop-shadow(0 0 2px rgba(168, 85, 247, 0.35));
  transition: filter var(--mmd-transition);
}

.mmd-dark-neon .node:hover rect,
.mmd-dark-neon .node:hover circle,
.mmd-dark-neon .node:hover polygon,
.mmd-dark-neon .node:hover path {
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.8))
          drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
}

/* đường nối phát sáng neon */
.mmd-dark-neon .edgePath .path,
.mmd-dark-neon .flowchart-link,
.mmd-dark-neon .messageLine0,
.mmd-dark-neon .messageLine1,
.mmd-dark-neon .relation,
.mmd-dark-neon .transition {
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.7));
}

/* cluster: viền neon, nền tối trong suốt */
.mmd-dark-neon .cluster rect {
  fill-opacity: 0.35;
}

/* nhãn cạnh trên nền tối: cho nền tối nhẹ để chữ sáng đọc được */
.mmd-dark-neon .edgeLabel,
.mmd-dark-neon .edgeLabel rect {
  background-color: transparent;
}

/* =============================================================================
   4) CLAUDE CODE — dựng từ sample SVG: nền trắng, thẻ pastel, viền mảnh 1px,
      bo góc nhỏ, mũi tên bo tròn, không shadow nặng (sạch & sắc nét).
   ============================================================================= */
.mmd-claude-code {
  --mmd-radius: 6px;          /* sample dùng rx 4–6 cho node                    */
  --mmd-radius-sm: 4px;
  --mmd-stroke-w: 1px;        /* viền mảnh đặc trưng                            */
  --mmd-edge-w: 1.5px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #ece9df;  /* khung kem rất nhạt như canvas Anthropic        */
}

.mmd-claude-code .node rect,
.mmd-claude-code .node polygon,
.mmd-claude-code .node path,
.mmd-claude-code .node circle,
.mmd-claude-code .node ellipse,
.mmd-claude-code .cluster rect,
.mmd-claude-code .actor,
.mmd-claude-code .classGroup rect,
.mmd-claude-code .stateGroup rect,
.mmd-claude-code .er.entityBox,
.mmd-claude-code .note rect {
  rx: var(--mmd-radius);
  ry: var(--mmd-radius);
  stroke-width: var(--mmd-stroke-w);
  /* shadow cực nhẹ — chỉ tách node khỏi nền trắng, không "nổi" */
  filter: drop-shadow(0 1px 1px rgba(20, 20, 19, 0.05));
  transition: filter var(--mmd-transition);
}

.mmd-claude-code .node:hover rect,
.mmd-claude-code .node:hover polygon,
.mmd-claude-code .node:hover path {
  filter: drop-shadow(0 2px 6px rgba(20, 20, 19, 0.12));
}

/* mũi tên & đường nối bo tròn, mảnh — đúng tinh thần sample */
.mmd-claude-code .edgePath .path,
.mmd-claude-code .flowchart-link,
.mmd-claude-code .messageLine0,
.mmd-claude-code .messageLine1,
.mmd-claude-code .relation,
.mmd-claude-code .transition {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* subgraph: nền kem nhạt, viền nét đứt mảnh tinh tế */
.mmd-claude-code .cluster rect {
  fill-opacity: 0.85;
}

/* nhãn cạnh: nền trắng bo nhẹ cho tách khỏi đường nối */
.mmd-claude-code .edgeLabel,
.mmd-claude-code .edgeLabel rect {
  border-radius: var(--mmd-radius-sm);
}

/* =============================================================================
   Responsive — màn nhỏ giảm bo góc/padding cho gọn
   ============================================================================= */
@media (max-width: 640px) {
  .mmd-theme { --mmd-radius: 10px; }
  .mmd-dark-neon { padding: 14px; }
  .mmd-claude-code { padding: 12px; }
}