/* ==========================================================================
   AI Engineer Portfolio - Journey & Git Commit Graph Styles
   ========================================================================== */

/* Git Commit Graph Table Styles */
.commit-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.commit-row:hover {
  background-color: rgba(255, 255, 255, 0.03);
}
.commit-row.active-row {
  background-color: rgba(99, 102, 241, 0.06);
}

.circle-component {
  position: absolute;
  z-index: 40;
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 9999px;
  border-width: 2px;
}
.circle-upper-left {
  top: 0px;
  transform: translate(-11px, -1px);
}
.circle-upper-right {
  top: 0px;
  transform: translate(12px, -1px);
}

/* Journey SVG Tree Custom Styles */
.journey-path {
  transition: opacity 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease, stroke 0.3s ease;
  opacity: 0.35;
}

/* Light theme strokes */
#path-root, #path-trunk-middle, #path-tdtu_present {
  stroke: #1d4ed8;
}
#path-lab-branch, #path-lab, #path-lab-present {
  stroke: #10b981;
}
#path-quaveo-branch, #path-quaveo_present {
  stroke: #ef4444;
}

/* Dark theme strokes */
.dark #path-root, .dark #path-trunk-middle, .dark #path-tdtu_present {
  stroke: #3b82f6;
}
.dark #path-lab-branch, .dark #path-lab, .dark #path-lab-present {
  stroke: #34d399;
}
.dark #path-quaveo-branch, .dark #path-quaveo_present {
  stroke: #f87171;
}

/* Active states */
.journey-path.active {
  opacity: 1;
  stroke-width: 7px;
}

#path-root.active, #path-trunk-middle.active, #path-tdtu_present.active {
  stroke: #2563eb !important;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.6));
}
.dark #path-root.active, .dark #path-trunk-middle.active, .dark #path-tdtu_present.active {
  stroke: #60a5fa !important;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
}

#path-lab-branch.active, #path-lab.active, #path-lab-present.active {
  stroke: #10b981 !important;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}
.dark #path-lab-branch.active, .dark #path-lab.active, .dark #path-lab-present.active {
  stroke: #34d399 !important;
  filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.4));
}

#path-quaveo-branch.active, #path-quaveo_present.active {
  stroke: #ef4444 !important;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
}
.dark #path-quaveo-branch.active, .dark #path-quaveo_present.active {
  stroke: #f87171 !important;
  filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.6));
}

.journey-path:hover {
  opacity: 0.8;
  stroke-width: 7px;
}
.journey-path.active:hover {
  opacity: 1;
}

/* Nodes styling */
.journey-node {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  transform-origin: center;
}

.journey-node:hover {
  transform: scale(1.2);
}

.journey-node.active {
  transform: scale(1.25);
  background-color: currentColor !important;
  border-color: currentColor !important;
  box-shadow: 0 0 15px currentColor;
}

.journey-node.active span {
  background-color: #ffffff !important;
}

.journey-node span {
  transition: background-color 0.3s ease;
}