/* =================================================================
   AortaCFD Interactive Workflow Diagram
   Teal = setup, Blue = BCs, Coral = solver, Amber = analysis
   ================================================================= */

.workflow-diagram {
  position: relative;
  max-width: 100%;
  margin: 1.5rem auto;
  overflow: visible;
  padding-top: 3rem;
}

.wf-title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  color: #37474f;
}
[data-md-color-scheme="slate"] .wf-title { color: #eceff1; }

.wf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 150px;
  grid-template-rows: auto auto auto;
  gap: 1.8rem 0.8rem;
  position: relative;
  min-width: 0;
  padding: 0.5rem;
}

.wf-arrows {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  color: #757575;
  overflow: visible;
}
[data-md-color-scheme="slate"] .wf-arrows { color: #90a4ae; }

.wf-node {
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.wf-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
[data-md-color-scheme="slate"] .wf-node { box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
[data-md-color-scheme="slate"] .wf-node:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

.wf-node__label { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.15rem; }
.wf-node__detail { font-size: 0.72rem; opacity: 0.8; line-height: 1.3; }

.wf-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%; transform: translateX(-50%);
  background: #263238; color: #eceff1;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem; line-height: 1.4;
  max-width: 240px; text-align: center;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
}
.wf-tooltip::after {
  content: ""; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #263238;
}
.wf-node:hover .wf-tooltip { display: block; }

.wf-node--input { background: #e8f5e9; border-color: #4caf50; color: #1b5e20; }
[data-md-color-scheme="slate"] .wf-node--input { background: #1b3a20; border-color: #66bb6a; color: #a5d6a7; }

.wf-node--setup { background: #e0f2f1; border-color: #009688; color: #004d40; }
[data-md-color-scheme="slate"] .wf-node--setup { background: #0d3330; border-color: #4db6ac; color: #80cbc4; }

.wf-node--bc { background: #e3f2fd; border-color: #1976d2; color: #0d47a1; }
[data-md-color-scheme="slate"] .wf-node--bc { background: #0d2840; border-color: #42a5f5; color: #90caf9; }

.wf-node--regen { background: #f5f5f5; border-color: #9e9e9e; color: #424242; }
[data-md-color-scheme="slate"] .wf-node--regen { background: #263238; border-color: #78909c; color: #b0bec5; }

.wf-node--solver { background: #fbe9e7; border-color: #e64a19; color: #bf360c; }
[data-md-color-scheme="slate"] .wf-node--solver { background: #3e1a0f; border-color: #ff7043; color: #ffab91; }

.wf-node--analysis { background: #fff8e1; border-color: #f9a825; color: #f57f17; }
[data-md-color-scheme="slate"] .wf-node--analysis { background: #3e2e05; border-color: #ffa726; color: #ffe082; }

.wf-node--output { background: #fff3e0; border-color: #ef6c00; color: #e65100; }
[data-md-color-scheme="slate"] .wf-node--output { background: #3e2510; border-color: #ff9800; color: #ffcc80; }

#wf-input       { grid-column: 1; grid-row: 2; }
#wf-case        { grid-column: 2; grid-row: 2; }
#wf-mesh        { grid-column: 3; grid-row: 2; }
#wf-config      { grid-column: 4; grid-row: 2 / 4; }
#wf-solver      { grid-column: 1; grid-row: 3; }
#wf-regen       { grid-column: 2; grid-row: 3; }
#wf-boundary    { grid-column: 3; grid-row: 3; }
#wf-reconstruct { grid-column: 1; grid-row: 4; }
#wf-postprocess { grid-column: 2; grid-row: 4; }
#wf-paraview    { grid-column: 3; grid-row: 4; }
#wf-outputs     { grid-column: 4; grid-row: 4; }

.wf-config {
  border: 2px dashed #bdbdbd; border-radius: 8px;
  padding: 0.6rem 0.5rem; text-align: center;
  background: #fafafa; color: #424242;
  z-index: 2; position: relative; align-self: center;
  cursor: pointer; transition: border-color 0.2s ease;
}
.wf-config:hover { border-color: #009688; }
[data-md-color-scheme="slate"] .wf-config { border-color: #546e7a; background: #1a2027; color: #b0bec5; }
[data-md-color-scheme="slate"] .wf-config:hover { border-color: #4db6ac; }

.wf-config__title { font-weight: 700; font-size: 0.82rem; margin-bottom: 0.3rem; }
.wf-config__item { font-size: 0.72rem; padding: 0.1rem 0; }
.wf-config__profiles { font-size: 0.65rem; opacity: 0.6; font-style: italic; margin-top: 0.2rem; }

.wf-capabilities {
  margin-top: 1.5rem; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 1rem 1.2rem; background: #fafafa; min-width: 0;
}
[data-md-color-scheme="slate"] .wf-capabilities { border-color: #37474f; background: #1a2027; }

.wf-capabilities__title {
  text-align: center; font-weight: 700; font-size: 1rem;
  margin-bottom: 1rem; color: #37474f;
}
[data-md-color-scheme="slate"] .wf-capabilities__title { color: #eceff1; }

.wf-capabilities__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.9rem 2rem; }

.wf-cap-group h4 { font-size: 0.85rem; font-weight: 700; margin: 0 0 0.25rem 0; color: #37474f; }
[data-md-color-scheme="slate"] .wf-cap-group h4 { color: #eceff1; }

.wf-cap-group ul { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; color: #616161; }
[data-md-color-scheme="slate"] .wf-cap-group ul { color: #90a4ae; }

.wf-cap-group li { padding: 0.08rem 0; }
.wf-cap-group li::before { content: "\2022\00a0"; }

.wf-footer {
  text-align: center; font-size: 0.75rem;
  color: #009688; margin-top: 1rem; opacity: 0.8; min-width: 0;
}
.wf-footer a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.wf-footer a:hover { opacity: 1; }
[data-md-color-scheme="slate"] .wf-footer { color: #4db6ac; }

@media (max-width: 900px) {
  .wf-grid { gap: 2.5rem 1rem; }
  .wf-node { padding: 0.7rem 0.4rem; }
  .wf-node__label { font-size: 0.85rem; }
  .wf-node__detail { font-size: 0.72rem; }
}