/* Убрано фиксирование z-index для решения проблемы сворачивания */

/* Карточка Career Path — разрешаем горизонтальный скролл */
#card-career-path {
    overflow: visible; /* Переопределяем overflow: hidden из .card */
}

#card-career-path > .card-body {
    overflow: visible; /* Контент масштабируется, скролл не нужен */
}

#career-path-container {
    position: relative;
    width: 100%; /* Фиксированная ширина, контент масштабируется */
    min-height: 100px; /* Минимальная высота вместо фиксированной */
    overflow: visible;
    transition: height 0.3s ease, transform 0.2s ease; /* Плавная анимация */
}

/* При свернутом состоянии */
#card-career-path.collapsed #career-path-container {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.career-path-container {
    position: relative;
    width: 100%; /* Фиксированная ширина, контент масштабируется */
    min-height: 600px;
    overflow: visible;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

/* Стили для SVG слоя с линиями */
.career-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
}

.connector-line {
    fill: none;
    stroke-width: 3px;
    stroke-linecap: round;
}

.branching-curve {
    stroke-dasharray: 10 5;
}

/* Стили для узлов-должностей (станции) */
.path-node {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 250px;
    transform: translate(-12px, -50%); 
}

.node-circle {
    box-sizing: border-box; 
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.node-title {
    font-size: 0.9rem;
    font-weight: 600;
    padding-left: 12px;
    color: var(--text-color);
}

/* --- Стили для динамического маркера --- */
.current-position-marker {
    position: absolute;
    z-index: 3;
    transform: translate(-12px, -50%);
}

.current-position-marker .node-circle {
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(255, 100, 0, 0.7);
}

.current-position-marker .you-are-here {
    position: absolute;
    top: -2px;
    left: 38px;
    background-color: #34d399;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.current-position-marker .you-are-here::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #34d399;
}

/* Цвета для веток */
.branch-0 .node-circle, .current-position-marker.branch-0 .node-circle { background-color: #84cc16; } 
.connector-line.branch-0 { stroke: #84cc16; }

.branch-1 .node-circle, .current-position-marker.branch-1 .node-circle { background-color: #34d399; } 
.connector-line.branch-1 { stroke: #34d399; }

.branch-2 .node-circle, .current-position-marker.branch-2 .node-circle { background-color: #60a5fa; } 
.connector-line.branch-2 { stroke: #60a5fa; }

.year-marker-dot.branch-0 { fill: #84cc16; }
.year-marker-dot.branch-1 { fill: #34d399; }
.year-marker-dot.branch-2 { fill: #60a5fa; }

.connector-line-extension {
    stroke-opacity: 0.4;
}

/* --- Цвета для новых веток (4 и 5) --- */

/* Ветка 4: Фиолетовый */
.branch-4 .node-circle, .current-position-marker.branch-4 .node-circle { background-color: #a855f7; } 
.connector-line.branch-3 { stroke: #a855f7; }
.year-marker-dot.branch-3 { fill: #a855f7; }

/* Ветка 5: Серый */
.branch-5 .node-circle, .current-position-marker.branch-5 .node-circle { background-color: #737373; } 
.connector-line.branch-4 { stroke: #737373; }
.year-marker-dot.branch-4 { fill: #737373; }

/* Ветка 3: Оранжевый */
.branch-3 .node-circle, .current-position-marker.branch-3 .node-circle { background-color: #f97316; } 
.connector-line.branch-5 { stroke: #f97316; }
.year-marker-dot.branch-5 { fill: #f97316; }