/* ── Mermaid dark-mode overrides ────────────────────────────────────────────
   Quarto only sets --mermaid-* variables once at :root using the light theme.
   SVGs are injected with class="mermaid-js" (not "mermaid") by mermaid-init.js.
   ────────────────────────────────────────────────────────────────────────── */
   body.quarto-dark {
    --mermaid-bg-color:          #2b2b2b;
    --mermaid-edge-color:        #d0d0d0;
    --mermaid-node-fg-color:     #fff;
    --mermaid-fg-color:          #d0d0d0;
    --mermaid-fg-color--lighter: #adb5bd;
    --mermaid-fg-color--lightest: #6c757d;
    --mermaid-label-bg-color:    transparent;
    --mermaid-label-fg-color:    #fff;
    --mermaid-node-bg-color:     rgba(55, 90, 127, 0.4);
  }

  /* Edge label boxes — transparent background */
  body.quarto-dark .mermaid-js .edgeLabel,
  body.quarto-dark .mermaid-js .edgeLabel .label,
  body.quarto-dark .mermaid-js .edgeLabel foreignObject > div,
  body.quarto-dark .mermaid-js .edgeLabel foreignObject div.edgeLabel {
    background-color: transparent !important;
    background: transparent !important;
  }
  body.quarto-dark .mermaid-js .edgeLabel rect {
    fill: transparent !important;
  }
  
  /* Gantt: title and section labels */
  body.quarto-dark .mermaid-js text.titleText {
    fill: #fff !important;
  }
  body.quarto-dark .mermaid-js .sectionTitle,
  body.quarto-dark .mermaid-js text[class^="sectionTitle"] {
    fill: #fff !important;
  }

  /* Text alignment for figure captions */
  .quarto-figure figcaption {
    text-align: center;
  }

/* ── Sidebar text visibility (light + dark mode) ─────────────────────────────
   The sidebar has a dark navy background in both modes, but in light mode:
   - .sidebar-title a falls through to $body-color (#25283A = same as bg) → invisible
   - .chapter-number gets $headings-color (#25283A) → invisible
   - .quarto-color-scheme-toggle SVG fill is computed to rgba(57,61,89,1) → near-invisible
   Setting color on #quarto-sidebar ensures all text inherits the correct
   light-gray foreground (#D9D9D9) in both modes. The toggle SVG is overridden
   separately since it's a background-image, not a text color.
   ────────────────────────────────────────────────────────────────────────── */
#quarto-sidebar {
  color: #D9D9D9;
}

#quarto-sidebar .chapter-number {
  color: inherit;
}

.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(217, 217, 217, 1)" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
}

.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(217, 217, 217, 1)" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
}

/* ── Full-width layout ───────────────────────────────────────────────────────
   page-layout: full removes the margin column but Bootstrap containers still
   cap the overall page width. These overrides remove that cap.
   ────────────────────────────────────────────────────────────────────────── */
.page-layout-full .quarto-container,
.page-layout-full #quarto-content,
.page-layout-full #quarto-document-content {
  max-width: 100% !important;
}

.page-layout-full .container,
.page-layout-full .container-fluid,
.page-layout-full .container-xl,
.page-layout-full .container-xxl {
  max-width: 100% !important;
}

#quarto-sidebar .sidebar-menu-container {
  flex: 1;
}

#quarto-sidebar::after {
  content: "";
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  height: 140px;
  background: url('../images/eurohpc.png') top center / 70% auto no-repeat;
  opacity: 0.85;
}