/* ==========================
   Code Blocks
   ========================== */

pre,
.highlight pre {
    background: #0f172a !important;
    color: #e2e8f0;

    border: 1px solid #1e293b;
    border-radius: 14px;

    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;

    overflow-x: auto;

    box-shadow: 0 8px 24px rgba(15,23,42,.08);
}


/* Rouge wrapper */
.highlight {
    background: transparent !important;
    border: none;
    margin: 1.75rem 0;
}

/* Inline code */

code {
    font-family:
        "JetBrains Mono",
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size: .92rem;
}

/* Don't style code inside pre twice */

pre code,
.highlight code {
    background: transparent;
    color: inherit;

    padding: 0;
    border: none;
}

/* Inline code */

p code,
li code,
td code,
blockquote code {

    background: #eef2ff;

    color: #1d4ed8;

    border: 1px solid #dbeafe;

    border-radius: 6px;

    padding: .15rem .45rem;
}

/* Scrollbar */

pre::-webkit-scrollbar {
    height: 10px;
}

pre::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}

pre::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Comments */
.highlight .c,
.highlight .cm,
.highlight .c1 {
    color: #64748b;
    font-style: italic;
}

/* Keywords */
.highlight .k,
.highlight .kd,
.highlight .kn {
    color: #c084fc;
}

/* Types */
.highlight .kt {
    color: #38bdf8;
}

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2 {
    color: #86efac;
}

/* Numbers */
.highlight .mi,
.highlight .mf {
    color: #fbbf24;
}

/* Functions */
.highlight .nf {
    color: #60a5fa;
}

/* Classes */
.highlight .nc {
    color: #facc15;
}

/* Constants */
.highlight .no {
    color: #fb7185;
}

/* Variables */
.highlight .nv {
    color: #f8fafc;
}

/* Operators */
.highlight .o {
    color: #e2e8f0;
}

.language-csharp,
.language-json,
.language-xml,
.language-yaml,
.language-bash,
.language-sql {
    position: relative;
}

.language-csharp::before {
    content: "C#";
}

.language-json::before {
    content: "JSON";
}

.language-xml::before {
    content: "XML";
}

.language-yaml::before {
    content: "YAML";
}

.language-bash::before {
    content: "Bash";
}

.language-sql::before {
    content: "SQL";
}

.language-csharp::before,
.language-json::before,
.language-xml::before,
.language-yaml::before,
.language-bash::before,
.language-sql::before {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    z-index: 2;
}
:not(pre) > code.highlighter-rouge,
:not(pre) > code {
    display: inline-block;

    padding: 0.15rem 0.45rem;

    font-size: 0.9em;
    font-weight: 500;
    font-family: "JetBrains Mono", Consolas, monospace;

    color: #0f172a;

    background: #f3f4f6;

    border: 1px solid #e5e7eb;

    border-radius: 6px;
}

pre:has(> code.language-mermaid) {
    background: white !important;
    border: 1px solid white;
    border-radius: 12px;
    padding: 1.5rem;
    color: #3c4858;
}

.language-mermaid {
    width: 100%;
}

.language-mermaid svg {
    display: block;
    margin: 0 auto;
    max-width: none; /* if Mermaid is shrinking it */
}

p,
ul,
ol,
li {
    color: #3c4858;
}

pre {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 30px;
  right: 8px;
  padding: 2px 5px;
  font-size: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #0f172a;
color: #94a3b8;
}

.copy-btn:hover {
  background: #0f172a;
  color:#666;;
}
.mermaid-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 2rem;
  vertical-align: top;
}

.mermaid-column {
  flex: 1 1 0;
  min-width: 0;
}

.mermaid-column .mermaid {
  width: 100%;
}

.mermaid-column svg {
  display: block;
  max-width: 100% !important;
  width: auto;
}

.mermaid-column:first-child {
  text-align: left;
}


.mermaid-column:last-child svg {
  margin-left: auto;
}

.treeView-node-description {
  font-size: 13px;
  font-style: normal;
  fill: #555;
}

svg.mermaid-svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}