/* Depictio Timeline Custom Styling */

/* Completed items - Depictio Green */
.nt-timeline-dot.completed {
    background: #8BC34A !important; /* Depictio green */
    border-color: #8BC34A !important;
}

.nt-timeline-dot.completed .icon {
    color: white !important;
}

/* MultiQC items - White background with Depictio orange border */
.nt-timeline-dot.multiqc {
    background: white !important;
    border: 3px solid #F68B33 !important; /* Depictio orange */
}

/* .nt-timeline-dot.multiqc .icon,
.nt-timeline-dot.multiqc img {
    background: white !important;
} */

/* NF-Core items - Depictio Teal */
.nt-timeline-dot.nfcore {
    background: #45B8AC !important; /* Depictio teal */
    border-color: #45B8AC !important;
}

.nt-timeline-dot.nfcore .icon {
    color: white !important;
}

/* Planned items - Depictio Blue */
.nt-timeline-dot.planned {
    background: #6495ED !important; /* Depictio blue */
    border-color: #6495ED !important;
}

.nt-timeline-dot.planned .icon {
    color: white !important;
}


/* Timeline vertical line styling - Grey */
/* For center-aligned timeline (which is what we're using) */
.nt-timeline.vertical.center .nt-timeline-before {
    background: linear-gradient(rgba(128, 128, 128, 0) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center .nt-timeline-after {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 0) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center .nt-timeline-items {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

/* For alternate center timeline */
.nt-timeline.vertical.center.alternate .nt-timeline-before {
    background: linear-gradient(rgba(128, 128, 128, 0) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center.alternate .nt-timeline-after {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 0) 100%) no-repeat center/4px 100% !important;
}

.nt-timeline.vertical.center.alternate .nt-timeline-items {
    background: linear-gradient(rgba(128, 128, 128, 1) 0%, rgba(128, 128, 128, 1) 100%) no-repeat center/4px 100% !important;
}

/* General timeline styling */
.nt-timeline .nt-timeline-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Timeline content styling */
.nt-timeline .nt-timeline-content h3 {
    color: var(--md-primary-fg-color);
    margin-bottom: 8px;
}

.nt-timeline .nt-timeline-content .sub-title {
    color: var(--md-default-fg-color--light);
    font-size: 0.85em;
    font-weight: 500;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .nt-timeline .nt-timeline-content h3 {
    color: var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] .nt-timeline .nt-timeline-content .sub-title {
    color: var(--md-default-fg-color--light);
}