/* ResetLab Mermaid theme — clean, minimal palette with firebrick accents.
   Ported from ragu/frontend/src/styles/mermaid-resetlab.css.

   The variable blocks below mirror the light-mode tokens from
   ragu/frontend/src/styles/_variables.scss so this file stays in sync
   with the app theme and is easy to diff against it.

   Selectors are scoped to svg.mermaid-js: Quarto renders {mermaid}
   blocks into bare <svg class="mermaid-js"> elements — the pre.mermaid
   container is removed by site_libs/quarto-diagram/mermaid-init.js. */

/* Primitive palette — subset of ragu _variables.scss (light mode) */
:root {
  --tt-brand-color-50: hsla(210, 16%, 96%, 1);
  --tt-brand-color-200: hsla(210, 15%, 82%, 1);
  --tt-brand-color-500: #8092a4;
  --tt-brand-color-600: hsla(210, 17%, 48%, 1);

  --tt-gray-light-100: rgba(244, 244, 245, 1);
  --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
  --white: rgba(255, 255, 255, 1);
}

/* Semantic color tokens — light mode */
:root {
  --color-danger: #b22222;
  --color-tip: #2e8b57;
  --color-warning-bg: var(--tt-color-yellow-inc-5);
  --color-surface: var(--white);
  --color-surface-secondary: var(--tt-gray-light-100);
  --color-text: #455260;

  /* Mermaid diagram colors */
  --mermaid-node-fill: #fff4dd;
  --mermaid-node-border: var(--tt-brand-color-200);
  --mermaid-edge: var(--tt-brand-color-500);
  --mermaid-edge-label-bg: var(--color-surface-secondary);
  --mermaid-edge-label-text: var(--tt-brand-color-600);
  --mermaid-cluster-bg: var(--tt-brand-color-50);
  --mermaid-cluster-border: var(--tt-brand-color-500);
  --mermaid-task-active: var(--color-warning-bg);
  --mermaid-crit-fill: #cb7e7a;
  --mermaid-done-crit-fill: #b7d4cb;
  --mermaid-exclude-range: var(--tt-brand-color-50);
  --mermaid-section-even: var(--tt-brand-color-500);
  --mermaid-tick-line: var(--tt-brand-color-500);
  --mermaid-tick-text: var(--tt-brand-color-500);
}

svg.mermaid-js {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

svg.mermaid-js .node :is(rect, circle, polygon, ellipse, cylinder, path, .label-container) {
    fill: var(--mermaid-node-fill) !important;
    stroke: var(--mermaid-node-border) !important;
    stroke-width: 0.5px !important;
}

svg.mermaid-js path {
    stroke: var(--mermaid-edge) !important;
}

svg.mermaid-js .marker {
    fill: var(--color-danger) !important;
    stroke: none !important;
}

svg.mermaid-js .node .label div,
svg.mermaid-js .node .label span {
  color: var(--color-text) !important;
  text-wrap: balance !important;
  text-align: center !important;
}

svg.mermaid-js[aria-roledescription] .label div {
  text-align: center !important;
}

svg.mermaid-js[aria-roledescription] :is(.label, .cluster-label) foreignObject > div {
  width: 100% !important;
  display: block !important;
}

/* Edge label background fix */
svg.mermaid-js .edgeLabel,
svg.mermaid-js .edgeLabel > *,
svg.mermaid-js .edgeLabel div,
svg.mermaid-js .edgeLabel span,
svg.mermaid-js .edgeLabel .label,
svg.mermaid-js .edgeLabel .label > * {
    background-color: var(--mermaid-edge-label-bg) !important;
    color: var(--mermaid-edge-label-text) !important;
    justify-content: center !important;
    font-size: 10px !important;
}

/* SVG-rendered edge label rects (non-HTML labels) */
svg.mermaid-js .edgeLabel rect {
    fill: var(--mermaid-edge-label-bg) !important;
}

/* Cluster (subgraph) styles */
svg.mermaid-js .cluster rect,
svg.mermaid-js .cluster .label-container {
  fill: var(--mermaid-cluster-bg) !important;
  stroke: var(--mermaid-cluster-border) !important;
  stroke-width: 0.5px !important;
  rx: 8px !important;
  ry: 8px !important;
}

svg.mermaid-js .cluster .label,
svg.mermaid-js .cluster .cluster-label,
svg.mermaid-js .cluster .label div,
svg.mermaid-js .cluster .label span {
  font-size: 16px !important;
}

/* Gantt Diagram Styles */
svg.mermaid-js[aria-roledescription=gantt] .titleText {
  text-anchor: middle !important;
  font-size: 1.5em !important;
  font-weight: bold !important;
  fill: var(--color-text) !important;
}

svg.mermaid-js[aria-roledescription=gantt] .section {
  stroke: none !important;
}

svg.mermaid-js[aria-roledescription=gantt] :is(.section0, .section2, .section4) {
  fill: var(--mermaid-section-even) !important;
  opacity: 0.15 !important;
}

svg.mermaid-js[aria-roledescription=gantt] :is(.section1, .section3, .section5) {
  fill: var(--mermaid-section-even) !important;
  opacity: 0.05 !important;
}

svg.mermaid-js[aria-roledescription=gantt] .grid > .tick > line {
  stroke: var(--mermaid-tick-line) !important;
  stroke-width: 1px !important;
  opacity: 0.3 !important;
}

svg.mermaid-js[aria-roledescription=gantt] .grid > .tick > text {
  fill: var(--mermaid-tick-text) !important;
}

svg.mermaid-js[aria-roledescription=gantt] .exclude-range {
  fill: var(--mermaid-exclude-range) !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class*=active] {
  fill: var(--mermaid-task-active) !important;
  stroke: var(--color-text) !important;
  stroke-width: 1px !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class*=done] {
  stroke: var(--color-tip) !important;
  stroke-width: 1px !important;
  stroke-dasharray: none !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class*=crit] {
  fill: var(--mermaid-crit-fill) !important;
  stroke-width: 1px !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class*=activeCrit] {
  fill: var(--mermaid-crit-fill) !important;
  stroke: var(--color-danger) !important;
  stroke-width: 1px !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class*=doneCrit] {
  fill: var(--mermaid-done-crit-fill) !important;
  stroke: var(--color-tip) !important;
  stroke-width: 1px !important;
  stroke-dasharray: none !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class^="task task"] {
  stroke: var(--mermaid-node-border) !important;
  stroke-width: 1px !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class^="task crit"] {
  stroke: var(--mermaid-node-border) !important;
  stroke-width: 1px !important;
}

svg.mermaid-js[aria-roledescription=gantt] rect[class^="task milestone"] {
  fill: var(--color-text) !important;
  stroke: none !important;
  stroke-width: 2px !important;
  stroke-dasharray: none !important;
}

svg.mermaid-js[aria-roledescription=gantt] g.today line.today {
  stroke: var(--color-danger) !important;
  stroke-width: 0.5px !important;
}

/* Kanban priority indicator colors */
svg.mermaid-js[aria-roledescription=kanban] .items line[stroke="lightblue"] {
  stroke: var(--mermaid-edge) !important;
}

svg.mermaid-js[aria-roledescription=kanban] .items line[stroke="blue"] {
  stroke: var(--color-text) !important;
}

svg.mermaid-js[aria-roledescription=kanban] .items line[stroke="orange"] {
  stroke: var(--mermaid-crit-fill) !important;
}

svg.mermaid-js[aria-roledescription=kanban] .items line[stroke="red"] {
  stroke: var(--color-danger) !important;
}

svg.mermaid-js[aria-roledescription=kanban] .kanban-column rect,
svg.mermaid-js[aria-roledescription=kanban] .kanban-column .section-rect {
  fill: var(--mermaid-cluster-bg) !important;
  stroke: var(--mermaid-cluster-border) !important;
  stroke-width: 0.5px !important;
  rx: 8px !important;
  ry: 8px !important;
}

svg.mermaid-js[aria-roledescription=kanban] .kanban-item rect,
svg.mermaid-js[aria-roledescription=kanban] .items rect {
  fill: var(--color-surface) !important;
  stroke: var(--mermaid-node-border) !important;
  stroke-width: 0.5px !important;
  rx: 4px !important;
  ry: 4px !important;
}

svg.mermaid-js[aria-roledescription=kanban] .kanban-item .label div,
svg.mermaid-js[aria-roledescription=kanban] .kanban-item .label span,
svg.mermaid-js[aria-roledescription=kanban] .items .label div,
svg.mermaid-js[aria-roledescription=kanban] .items .label span {
  color: var(--color-text) !important;
  text-align: left !important;
}

svg.mermaid-js[aria-roledescription=kanban] .kanban-column .label div,
svg.mermaid-js[aria-roledescription=kanban] .kanban-column .label span {
  color: var(--color-text) !important;
  font-weight: bold !important;
}